CSS white-space 属性用于指定如何处理元素中的空格。
white space可以是一系列的空格(多次按下space键或tab键),或者是使用回车键换行,或者是<br/>
标签。white-space
属性就是用于指定如何处理在源代码中出现的white space,并将空白符呈现在网页中。
默认情况下,white-space
的取值为normal
,表示将所有的空格都合并为一个。例如你在编辑器中连续键入了两个空白符,在页面展现时,这两个空白符会被合并为一个。
某些时候,例如你想在页面中以某种格式呈现一些源代码,你可能需要保留你在编辑器中书写的空格,而不是将所有的空格都合并为一个。white-space
属性提供了一个pre
取值,该值的效果类似于HTML<pre>
标签。
如果你需要保留文字周围的空白符,又不想文字超出容器之外,此时可以使用pre-wrap
取值。该值的pre-
部分告诉浏览器保留文字的空白和断行符,wrap
部分告诉浏览器对超出它所在的容器之外的文字进行换行处理。
此外你还可以通过nowrap
值来告诉浏览器合并文字间的空格,但是不对文字进行换行。
最后还有一个pre-line
取值,它和pre-wrap
值类似,连续的空白符会被合并,在遇到换行符或者<br>元素,或者需要为了填充line box时才会换行。
white-space
属性不仅可以用在文本上,也可以用在所有的内联元素上。我们经常会在一个可缩放的元素上设置white-space: nowrap
值,这样它里面的图片可以水平排成一行。
官方语法
white-space: normal | pre | nowrap | pre-wrap | pre-line
参数:
- normal:连续的空白符会被合并,换行符会被当作空白符来处理。填充line box时,必要的话会换行。
- pre:连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
- nowrap:和
normal
一样,连续的空白符会被合并。但文本内的换行无效。 - pre-wrap:连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充line box时才会换行。
- pre-line:连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充line box时会换行。
下表中列出了各种white-sapce
取值的含义:
换行符 | 空格和制表符 | 文字转行 | |
normal | 合并 | 合并 | 转行 |
nowrap | 合并 | 合并 | 不转行 |
pre | 保留 | 保留 | 不转行 |
pre-wrap | 保留 | 保留 | 转行 |
pre-line | 保留 | 合并 | 转行 |
white-space
属性的初始值为normal
。
应用范围
white-space
属性可以应用所有元素上。
示例代码
white-space: normal white-space: nowrap white-space: pre white-space: pre-wrap white-space: pre-line
在线演示
下面的例子演示white-space
取值为:pre
、nowrap
和pre-line
是的效果。
浏览器支持
所有现代浏览器都支持CSS white-space
属性,包括:Chrome, Firefox, Safari, Opera, Internet Explorer8+, 以及 Android 和 iOS。