white-space CSS 属性用于设置如何处理元素内的{{Glossary("whitespace", "空白字符")}}。

{{InteractiveExample("CSS Demo: white-space")}}

```css interactive-example-choice white-space: normal;

```css interactive-example-choice
white-space: pre;

```css interactive-example-choice white-space: pre-wrap;

```css interactive-example-choice
white-space: pre-line;

```css interactive-example-choice white-space: wrap;

```css interactive-example-choice
white-space: collapse;

```css interactive-example-choice white-space: preserve nowrap;

```html interactive-example
<section class="default-example" id="default-example">
  <div id="example-element">
    <p>
      But ere she from the church-door stepped She smiled and told us why: 'It
      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and
      smiled, and passed it off Ere from the door she stept—
    </p>
  </div>
</section>

```css interactive-example

example-element {

width: 16rem; }

example-element p {

border: 1px solid #c5c5c5; padding: 0.75rem; text-align: left; }

这个属性指定了两件事：

- 空白字符是否[合并](#合并空白字符)，以及如何合并。
- 是否换行，以及如何换行。

> [!NOTE]
> 要使单词可以在*其内部*被截断，请使用 {{CSSxRef("overflow-wrap")}}、{{CSSxRef("word-break")}} 或 {{CSSxRef("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 属性可以被指定为从下面的值列表中选择的单个关键字，或者是表示 {{CSSxRef("white-space-collapse")}} 和 {{cssxref("text-wrap")}} 属性的简写的两个值。

• normal
  • : 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
• nowrap
  • : 和 normal 一样合并空白符，但阻止源码中的文本换行。
• pre
  • : 连续的空白符会被保留。仅在遇到换行符或 {{HTMLElement("br")}} 元素时才会换行。
• pre-wrap
  • : 连续的空白符会被保留。在遇到换行符或 {{HTMLElement("br")}} 元素时，或者根据填充行框盒子的需要换行。
• pre-line
  • : 连续的空白符会被合并。在遇到换行符或 {{HTMLElement("br")}} 元素时，或者根据填充行框盒子的需要换行。
• break-spaces
  • : 与 pre-wrap 的行为相同，除了：
  • 任何保留的空白序列总是占用空间，包括行末的。
  • 每个保留的空白字符后（包括空白字符之间）都可以被截断。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（{{cssxref("min-content")}} 尺寸和 {{cssxref("max-content")}} 尺寸）。

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

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

默认情况下，一个制表符等于 8 个空格，且可以使用 tab-size 属性。对于 normal、nowrap 和 pre-line 值，每个制表符都会被转化为一个空格（U+0020）字符。

[!NOTE] 空格和其他空白分隔符之间存在区别。定义如下：

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

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

合并空白字符

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

形式定义

{{CSSInfo}}

形式语法

{{CSSSyntax}}

示例

基础示例

code {
  white-space: pre;
}

\

<

pre> 元素内的换行

pre {
  white-space: pre-wrap;
}

试试看

```html hidden

```css hidden
.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;
}

```js hidden 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); });

{{EmbedLiveSample("试试看", "100%", 450)}}

### 控制表格中的换行

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

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

结果

{{EmbedLiveSample("控制表格中的换行", "100%", "100%")}}

SVG 文本元素的多行文本

white-space CSS 属性可用于在 {{SVGElement("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;
}

结果

{{EmbedLiveSample("SVG 文本元素的多行文本", "100%", 350)}}