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盒子时,必要的话会换行。
nowrap
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充line盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充line盒子时会换行。

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
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

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 ? Safari iOS Full support 1Samsung Internet Android ?
break-spacesChrome Full support 76Edge No support NoFirefox 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 No support NoSafari 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 ? Safari iOS Full support 1Samsung Internet Android ?
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 ? Safari iOS Full support 1Samsung Internet Android ?
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 ? Safari iOS Full support 1Samsung Internet Android ?
Support in SVGChrome No support NoEdge Full support 12Firefox 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 ? Safari 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 ? Safari iOS Full support 1Samsung Internet Android ?

Legend

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