空白 | 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;

语法

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

可能的值

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

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

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

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

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

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

形式语法

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+结果

规范

浏览器兼容性

??CSS 中文开发手册