white-space

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

white-space CSS 属性设置了元素内部空白符的处理方式。

试一试

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

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

#example-element {
  width: 16rem;
}

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

该属性指定了两件事：

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

注意： 要使单词自身内部断开，请改用overflow-wrap、word-break或hyphens。

构成属性

此属性是以下 CSS 属性的简写：

注意： 规范定义了一个第三个构成属性：white-space-trim，目前尚未在任何浏览器中实现。

语法

css

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

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;
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-mode属性的值，或者以下特殊关键字：

normal: 空白符序列会合并。源文件中的换行符与其它空白符的处理方式相同。必要时会断行以填充行框。等同于 collapse wrap。
pre: 空白符序列会保留。只有源文件中的换行符和<br>元素处会断行。等同于 preserve nowrap。
pre-wrap: 空白符序列会保留。在换行符、<br>处以及必要时会断行以填充行框。等同于 preserve wrap。
pre-line: 空白符序列会合并。在换行符、<br>处以及必要时会断行以填充行框。等同于 preserve-breaks wrap。

注意： white-space 属性作为简写属性是一个相对较新的特性（参见浏览器兼容性）。最初，它有六个关键字值；现在，值 nowrap 被解释为text-wrap-mode的值，而值 break-spaces 被解释为white-space-collapse的值。上述四个关键字仍然是 white-space 独有的，但它们有对应的长写形式。将 white-space 更改为简写属性，将可接受的值扩展到更多的关键字和组合，例如 wrap 和 collapse。

下表总结了这四个 white-space 关键字值的行为：

	新行	空格和制表符	文本换行	行尾空格	行尾其他空格分隔符
`normal`	合并	合并	换行	移除	悬挂
`pre`	保留	保留	不换行	保留	不换行
`pre-wrap`	保留	保留	换行	悬挂	悬挂
`pre-line`	保留	合并	换行	移除	悬挂

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

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

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

当空白符被说成是悬挂时，这会影响在进行固有尺寸测量时盒子的尺寸。

正式定义

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

正式语法

white-space = 
  normal                                              |
  pre                                                 |
  pre-wrap                                            |
  pre-line                                            |
  <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>  

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap  

<white-space-trim> = 
  none                                              |
  discard-before || discard-after || discard-inner

示例

基本示例

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: gainsboro;
  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 文本模块第 4 级 # white-space-property
Scalable Vector Graphics (SVG) 2 # TextWhiteSpace

浏览器兼容性

另见

定义单词自身内部如何断开的属性：overflow-wrap、word-break、hyphens
tab-size
CSS 中空白符的处理

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者于2025 年 8 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容问题