white-space

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

尝试一下

这个属性指定了两件事：

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

备注： 要使单词可以在其内部被截断，请使用 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

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

break-spaces

与 pre-wrap 的行为相同，除了：

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

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

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

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

空格: 空格（U+0020）、制表符（U+0009）和分段符（例如换行）
其他空白分隔符: Unicode 中定义的所有其他空格分隔符（已定义为空格的分隔符除外）。

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

合并空白字符

white-space-collapse (en-US) 属性的页面解释了浏览器合并空白字符的算法 (en-US)。

形式定义

初始值	`normal`
适用元素	all elements
是否是继承属性	yes
计算值	as specified
Animation type	discrete

形式语法

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>
    <option>preserve nowrap</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: 300px;
  padding: 16px;
}

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

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

#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.setAttribute("style", `white-space: ${e.target.value}`);
});

规范

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

浏览器兼容性

BCD tables only load in the browser

参见

定义单词如何在其内部被截断的属性：overflow-wrap、word-break、hyphens