white-space

white-space CSS 属性是用来设置如何处理元素中的 空白

语法

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

white-space属性被指定为从下面的值列表中选择的单个关键字。

normal
连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。
nowrap
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

break-spaces
与 pre-wrap的行为相同,除了:

  • 任何保留的空白序列总是占用空间,包括在行尾。
  • 每个保留的空格字符后都存在换行机会,包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

下面的表格总结了各种 white-space 值的行为:

换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

示例

基础示例

code { 
  white-space: pre; 
}

下面的代码允许在 <pre> 中换行

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* current browsers */
}

规范

规范 状态 注释
CSS Text Module Level 3
white-space
Working Draft Precises the breaking algorithms.
CSS Level 2 (Revision 1)
white-space
Recommendation Initial specification.
初始值normal
适用元素all elements
是否是继承属性yes
计算值as specified
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
white-spaceChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 4Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
break-spacesChrome Full support 76Edge Full support 79Firefox Full support 69IE No support NoOpera Full support 62Safari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS No support NoSamsung Internet Android No support No
preChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 4Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
pre-lineChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 9.5Safari Full support 3WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
pre-wrapChrome Full support 1Edge Full support 12Firefox Full support 3
Full support 3
No support 1 — 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 8
Notes
Full support 8
Notes
Notes From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera Full support 8Safari Full support 3WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
Support in SVGChrome No support NoEdge No support 12 — 79Firefox Full support 36IE Full support 10Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 36Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Support on <textarea>Chrome Full support 1Edge Full support 12Firefox Full support 36IE Full support 5.5Opera Full support 4Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 36Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.