white-space
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
尝试一下
这个属性指定了两件事:
- 空白字符是否合并,以及如何合并。
- 是否换行,以及如何换行。
备注:
要使单词可以在其内部被截断,请使用 overflow-wrap
、word-break
或 hyphens
代替。
语法
/* 单个关键字值 */
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
和 text-wrap
属性的简写的两个值。
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 |
保留 | 保留 | 换行 | 换行 | 换行 |
默认情况下,一个制表符等于 8 个空格,且可以使用 tab-size
属性。对于 normal
、nowrap
和 pre-line
值,每个制表符都会被转化为一个空格(U+0020)字符。
合并空白字符
white-space-collapse
属性的页面解释了浏览器合并空白字符的算法。
形式定义
形式语法
示例
基础示例
code {
white-space: pre;
}
<pre> 元素内的换行
pre {
white-space: pre-wrap;
}
试试看
控制表格中的换行
HTML
<table>
<tr>
<td></td>
<td>拆分后非常长的内容</td>
<td class="nw">未拆分非常长的内容</td>
</tr>
<tr>
<td class="nw">white-space:</td>
<td>normal</td>
<td>nowrap</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
td {
border: solid 1px black;
text-align: center;
}
.nw {
white-space: nowrap;
}
结果
SVG 文本元素的多行文本
white-space
CSS 属性可用于在 <text>
元素中创建多行文本,该元素默认情况下不会换行。
HTML
<text>
元素内部的文本需要拆分成多行以便检测新行。从第二行开始,其余行的空白需要移除。
<svg viewBox="0 0 320 150">
<text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
</text>
</svg>
CSS
text {
white-space: break-spaces;
}
结果
规范
Specification |
---|
CSS Text Module Level 3 # white-space-property |
浏览器兼容性
BCD tables only load in the browser
参见
- 定义单词如何在其内部被截断的属性:
overflow-wrap
、word-break
、hyphens
tab-size