概要
white-space CSS 属性是用来描述如何处理元素中的空格。
| 初始值 | normal |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: normal | pre | nowrap | pre-wrap | pre-line
white-space: normal white-space: nowrap white-space: pre white-space: pre-wrap white-space: pre-line white-space: inherit
值
normal- 连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap- 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre- 连续的空白符会被保留。在遇到换行符或者
<br>元素时才会换行。 pre-wrap- 连续的空白符会被保留。在遇到换行符或者
<br>元素，或者需要为了填充line盒子时才会换行。 pre-line- 连续的空白符会被合并。在遇到换行符或者
<br>元素，或者需要为了填充line盒子时会换行。
下面的表格总结了各种 white-sapce 值的行为：
| 换行符 | 空格和制表符 | 文字转行 | |
|---|---|---|---|
normal |
合并 | 合并 | 转行 |
nowrap |
合并 | 合并 | 不转行 |
pre |
保留 | 保留 | 不转行 |
pre-wrap |
保留 | 保留 | 转行 |
pre-line |
保留 | 合并 | 转行 |
示例
code {
white-space: pre;
}
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Text Level 3 white-space |
Working Draft | Precises the breaking algorithms. |
| CSS Level 2 (Revision 1) white-space |
Recommendation | Initial specification. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support (normal and nowrap) |
1.0 | 1.0 (1.7 or earlier) | 5.5 [1] | 4.0 | 1.0 (85) |
pre |
1.0 | 1.0 | 6.0 | 4.0 | 1.0 (85) |
pre-wrap |
1.0 | 1.0 (1.7 or earlier) — 3.5 (1.9.1)-moz 3.0 (1.9) |
8.0 | 8.0 | 3.0 (522) |
pre-line |
1.0 | 3.5 (1.9.1) | 8.0 | 9.5 | 3.0 (522) |
Support on <textarea> |
1.0 | 36 (36) | 5.5 | 4.0 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
[1] Internet Explorer 5.5+ 支持 word-wrap: break-word;
下面的代码允许在 pre 元素内换行：
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* 现代浏览器 */
}