white-space

尝试一下

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

#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: 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 和 text-wrap 属性的简写的两个值。

normal

连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

nowrap

和 normal 一样合并空白符，但阻止源码中的文本换行。

pre

连续的空白符会被保留。仅在遇到换行符或
元素时才会换行。

pre-wrap

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

pre-line

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

break-spaces

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

任何保留的空白序列总是占用空间，包括行末的。

每个保留的空白字符后（包括空白字符之间）都可以被截断。

这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（min-content 尺寸和 max-content 尺寸）。

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

换行符

空格和制表符

文本换行

行末空格

行末的其他空白分隔符

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适用元素所有元素是否是继承属性是计算值as specified动画类型离散值

形式语法

white-space = normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'> = collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces = wrap | nowrap = none | discard-before || discard-after || discard-inner

此语法反映了基于 CSS Text Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

基础示例

csscode {

white-space: pre;

}

 元素内的换行

csspre {
white-space: pre-wrap;
}
试试看

p { white-space:

normal

nowrap

pre

pre-wrap

pre-line

break-spaces


}



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.


.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



拆分后非常长的内容
未拆分非常长的内容


white-space:
normal
nowrap


CSS
csstable {
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 属性可用于在  元素中创建多行文本，该元素默认情况下不会换行。
HTML
 元素内部的文本需要拆分成多行以便检测新行。从第二行开始，其余行的空白需要移除。
html
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.


CSS
csstext {
white-space: break-spaces;
}
结果
规范
Specification
CSS Text Module Level 4# white-space-property
Scalable Vector Graphics (SVG) 2# TextWhiteSpace
浏览器兼容性
参见
定义单词如何在其内部被截断的属性：overflow-wrap、word-break、hyphens
tab-size
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年11月3日 by MDN contributors.
View this page on GitHub • Report a problem with this content