white-space-collapse
Baseline 2024 *
新推出
white-space-collapse CSS 属性控制元素内部空白符的折叠方式。
注意： white-space-collapse 和 text-wrap-mode 属性可以通过 white-space 缩写属性一起声明。
语法
css
/* Keyword values */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;
/* Global values */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;
white-space-collapse 属性指定为从以下值列表中选择的单个关键字。
值
collapse-
空白符序列被折叠。
preserve-
空白符序列和分段符被保留。
preserve-breaks-
空白符序列被折叠，而分段符被保留。
preserve-spaces-
空白符序列被保留，而制表符和分段符被转换为空格。
break-spaces-
行为与
preserve相同，除了- 任何保留的空白符序列总是占用空间，包括在行尾。
- 在每个保留的空白符字符之后都存在换行机会，包括在空白符字符之间。
- 保留的空格占用空间且不悬挂，因此会影响盒子的固有尺寸（
min-content尺寸和max-content尺寸）。
注意： 分段符 是指会导致文本换到新行（例如换行符）的字符。
注意： CSS 文本模块为 white-space-collapse 属性定义了一个 discard 值，用于丢弃元素中的所有空白符，但是，这在任何浏览器中都不受支持。
正式定义
正式语法
white-space-collapse =
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces
示例
HTML
html
<h2 class="collapse">Default behavior;
all whitespace is collapsed
in the heading .</h2>
<h2 class="preserve">In this case
all whitespace is preserved
in the heading .</h2>
<h2 class="preserve-breaks">In this case only
the line breaks are preserved
in the heading .</h2>
<h2 class="preserve-spaces">In this case only
the spaces are preserved
in the heading .</h2>
CSS
css
.collapse {
white-space-collapse: collapse;
}
.preserve {
white-space-collapse: preserve;
}
.preserve-breaks {
white-space-collapse: preserve-breaks;
}
.preserve-spaces {
white-space-collapse: preserve-spaces;
}
h2 {
font-size: 1.6rem;
font-family: monospace;
border-bottom: 1px dotted #cccccc;
}
结果
规范
| 规范 |
|---|
| CSS 文本模块第 4 级 # white-space-collapsing |
浏览器兼容性
加载中…
另见
white-space-collapse和text-wrap-mode的缩写：white-space属性。- CSS 文本模块
- CSS 中空白符的处理