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.

* Some parts of this feature may have varying levels of support.

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 4
# white-space-property
Scalable Vector Graphics (SVG) 2
# TextWhiteSpace

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
white-space
break-spaces
normal
nowrap
pre
pre-line
pre-wrap
Accepts shorthand values
Experimental
On SVG elements
Support on <textarea>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见