white-space

white-space CSS 属性设置如何处理元素内部的空白。

尝试一下

该属性指定两件事

是否以及如何折叠空白。
是否以及如何换行。

注意： 要使单词在自身内换行，请使用overflow-wrap、word-break 或hyphens 代替。

语法

css

/* Single keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* white-space-collapse and text-wrap shorthand values */
white-space: collapse balance;
white-space: preserve nowrap;

/* Global values */
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

空白序列将折叠。行在换行符、<br> 处换行，以及根据需要填充行框。

break-spaces

行为与pre-wrap 相同，但不同之处在于

任何保留的空白序列始终占用空间，包括行尾。
在每个保留的空白字符之后，包括空白字符之间，都存在换行机会。
此类保留的空格占用空间，不会悬挂，因此会影响盒子的固有大小（min-content 大小和max-content 大小）。

下表总结了各种white-space 关键字值的 behaviour

	换行	空格和制表符	文本换行	行尾空格	行尾其他空格分隔符
`normal`	折叠	折叠	换行	移除	悬挂
`nowrap`	折叠	折叠	不换行	移除	悬挂
`pre`	保留	保留	不换行	保留	不换行
`pre-wrap`	保留	保留	换行	悬挂	悬挂
`pre-line`	保留	折叠	换行	移除	悬挂
`break-spaces`	保留	保留	换行	换行	换行

制表符默认设置为 8 个空格，可以使用tab-size 属性进行配置。在normal、nowrap 和pre-line 值的情况下，每个制表符都会转换为空格 (U+0020) 字符。

注意： 在空格和其他空格分隔符之间存在区别。这些定义如下

空格: 空格 (U+0020)、制表符 (U+0009) 和段落分隔符（如换行符）。
其他空格分隔符: Unicode 中定义的所有其他空格分隔符，除了那些已经定义为空格的之外。

在说空白悬挂的地方，这会影响在测量固有大小时的盒子大小。

空白的折叠

该 white-space-collapse 属性页面解释了浏览器压缩空白的算法。

正式定义

初始值	`normal`
应用于	所有元素
继承	是
计算值	按指定
动画类型	离散

正式语法

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

示例

基本示例

css

code {
  white-space: pre;
}

<pre> 元素内部的换行符

css

pre {
  white-space: pre-wrap;
}

正在运行

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <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>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: rgb(220 220 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

控制表格中的换行

HTML

html

<table>
  <tr>
    <td></td>
    <td>Very long content that splits</td>
    <td class="nw">Very long content that don't split</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;
}

结果

规范

规范
CSS 文本模块级别 3 # white-space-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

定义单词在自身内部如何断开的属性：overflow-wrap，word-break，hyphens
tab-size