空白 | white-space (Text) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

空白 | white-space (Text) - CSS 中文开发手册

white-spaceCSS属性决定如何对元素内的空白进行处理。为了语句在中间断开，可以使用overflow-wrap，word-break或hyphens代替。

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

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

Initial value	normal
Applies to	all elements
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

white-space属性被指定为从下面的列表中的任意一个关键字。

可能的值

normal——空白字符序列被折叠。源代码中的换行符与其他空白字符处做相同处理。根据需要断行以填充行框。

nowrap——如同normal一样折叠空白区域，但是抑制了源文件中的换行符（文本换行）。

pre——空白字符序列被保留。行仅在源文件和<br>元素中的换行符处断开。

pre-wrap——空白字符序列被保留。在换行符和<br>处断行，必要时填充行框。

pre-line——空白字符序列被折叠。在换行符和<br>处断行，必要时填充行框。

下表总结了white-space的可能值：

​	New lines	Spaces and tabs	Text wrapping
normal	Collapse	Collapse	Wrap
nowrap	Collapse	Collapse	No wrap
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Preserve	Collapse	Wrap

形式语法

normal | pre | nowrap | 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;      /* Modern 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+结果

规范

Specification	Status	Comment
CSS Text Module Level 3The definition of 'white-space' in that specification.	Working Draft	Precisely defines the breaking algorithms.
CSS Level 2 (Revision 1)The definition of 'white-space' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (normal and nowrap)	1.0	(Yes)	1.0 (1.7 or earlier)	5.51	4.0	1.0 (85)
pre	1.0	(Yes)	1.0	6.0	4.0	1.0 (85)
pre-wrap	1.0	(Yes)	1.0 (1.7 or earlier)-moz 3.0 (1.9)	8.0	8.0	3.0 (522)
pre-line	1.0	(Yes)	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	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?

  CSS 中文开发手册

  本文标题：空白 | white-space (Text) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32159.html