white-space

3 位贡献者:

概要

white-space CSS 属性是用来描述如何处理元素中的空格。

语法

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;      /* 现代浏览器 */
}

另参见

文档标签和贡献者

向此页面作出贡献: FredWe, paddingme, szmtcjm
最后编辑者: FredWe,