MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概要

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

初始值normal
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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; 
}

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

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

 

实际案例

源代码

    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 

规范

规范 状态 注释
CSS Text Module 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;

文档标签和贡献者

 此页面的贡献者: OlafCheng, cjl, fscholz, Sebastianz, FredWe, paddingme, szmtcjm
 最后编辑者: OlafCheng,