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.

white-space CSS 属性用于设置如何处理元素内的空白字符

尝试一下

这个属性指定了两件事:

  • 空白字符是否合并,以及如何合并。
  • 是否换行,以及如何换行。

备注: 要使单词可以在其内部被截断,请使用 overflow-wrapword-breakhyphens 代替。

语法

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-collapsetext-wrap 属性的简写的两个值。

normal

连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

nowrap

normal 一样合并空白符,但阻止源码中的文本换行。

pre

连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。

pre-wrap

连续的空白符会被保留。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。

pre-line

连续的空白符会被合并。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。

break-spaces

pre-wrap 的行为相同,除了:

  • 任何保留的空白序列总是占用空间,包括行末的。
  • 每个保留的空白字符后(包括空白字符之间)都可以被截断。
  • 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(min-content 尺寸和 max-content 尺寸)。

下面的表格总结了各种 white-space 关键字值的行为:

换行符 空格和制表符 文本换行 行末空格 行末的其他空白分隔符
normal 合并 合并 换行 移除 挂起
nowrap 合并 合并 不换行 移除 挂起
pre 保留 保留 不换行 保留 不换行
pre-wrap 保留 保留 换行 挂起 挂起
pre-line 保留 合并 换行 移除 挂起
break-spaces 保留 保留 换行 换行 换行

默认情况下,一个制表符等于 8 个空格,且可以使用 tab-size 属性。对于 normalnowrappre-line 值,每个制表符都会被转化为一个空格(U+0020)字符。

备注: 空格其他空白分隔符之间存在区别。定义如下:

空格

空格(U+0020)、制表符(U+0009)和分段符(例如换行)

其他空白分隔符

Unicode 中定义的所有其他空格分隔符(已定义为空格的分隔符除外)。

如果空白字符被挂起,那么它可能会影响框的固有尺寸的测量结果。

合并空白字符

形式定义

初始值normal
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

white-space = 
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

示例

基础示例

css
code {
  white-space: pre;
}

<pre> 元素内的换行

css
pre {
  white-space: pre-wrap;
}

试试看

控制表格中的换行

HTML

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

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> 元素内部的文本需要拆分成多行以便检测新行。从第二行开始,其余行的空白需要移除。

html
<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

css
text {
  white-space: break-spaces;
}

结果

规范

Specification
CSS Text Module Level 3
# white-space-property

浏览器兼容性

BCD tables only load in the browser

参见