white-space
CSS white-space
属性用于设置如何处理元素内的空白字符 (en-US)。
尝试一下
这个属性指定了两件事:
- 空白字符是否合并,以及如何合并。
- 是否换行,以及如何换行。
备注: 要使单词可以在其内部被截断,请使用 overflow-wrap
、word-break
或 hyphens
代替。
语法
css
/* 单个关键字值 */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
/* white-space-collapse 和 text-wrap 简写值 */
white-space: collapse balance;
white-space: preserve nowrap;
/* 全局值 */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;
值
white-space
属性可以被指定为从下面的值列表中选择的单个关键字,或者是表示 white-space-collapse
(en-US) 和 text-wrap
(en-US) 属性的简写的两个值。
normal
-
连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
nowrap
-
和
normal
一样合并空白符,但阻止源码中的文本换行。 pre
-
连续的空白符会被保留。仅在遇到换行符或
<br>
元素时才会换行。 pre-wrap
-
连续的空白符会被保留。在遇到换行符或
<br>
元素时,或者根据填充行框盒子的需要换行。 pre-line
break-spaces
-
与
pre-wrap
的行为相同,除了:- 任何保留的空白序列总是占用空间,包括行末的。
- 每个保留的空白字符后(包括空白字符之间)都可以被截断。
- 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容——
min-content
——大小和最大内容——max-content
——大小)。
下面的表格总结了各种 white-space
关键字值的行为:
换行符 | 空格和制表符 | 文本换行 | 行末空格 | 行末的其他空白分隔符 | |
---|---|---|---|---|---|
normal |
合并 | 合并 | 换行 | 移除 | 挂起 |
nowrap |
合并 | 合并 | 不换行 | 移除 | 挂起 |
pre |
保留 | 保留 | 不换行 | 保留 | 不换行 |
pre-wrap |
保留 | 保留 | 换行 | 挂起 | 挂起 |
pre-line |
保留 | 合并 | 换行 | 移除 | 挂起 |
break-spaces |
保留 | 保留 | 换行 | 换行 | 换行 |
备注: 空格和其他空白分隔符之间存在区别。定义如下:
- 空格
-
空格(U+0020)、制表符(U+0009)和分段符(例如换行)
- 其他空白分隔符
-
Unicode 中定义的所有其他空格分隔符(已定义为空格的分隔符除外)。
如果空白字符被挂起,那么它可能会影响框的固有尺寸的测量结果。
合并空白字符
形式定义
形式语法
示例
基础示例
css
code {
white-space: pre;
}
<pre> 元素内的换行
css
pre {
white-space: pre-wrap;
}
试试看
规范
Specification |
---|
CSS Text Module Level 3 # white-space-property |
浏览器兼容性
BCD tables only load in the browser
参见
- 定义单词如何在其内部被截断的属性:
overflow-wrap
、word-break
、hyphens