white-space-collapse

white-space-collapse CSS 属性控制元素内部空白字符如何折叠。

注意：可以使用 white-space 简写属性同时声明 white-space-collapse 和 text-wrap 属性。

语法

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 大小）。

注意：段落分隔符 是换行符等导致文本换行的字符。

空白字符折叠

用户代理处理空白字符折叠的方式如下

  • 制表符通常转换为空格。
  • 如果要折叠段落分隔符
    • 段落分隔符序列折叠成单个段落分隔符。
    • 对于使用空格分隔单词的语言（如英语），它们会被转换为空格，或者对于不使用空格分隔单词的语言（如中文），它们会被完全移除。
  • 如果要折叠空格
    • 删除段落分隔符之前或之后的空格或制表符。
    • 空格序列被转换或“折叠”成单个空格。
  • 当保留空格时，空格序列被视为不换行，但它们会在每个序列的末尾进行软换行——即下一行始终以下一个非空格字符开头。然而，在 break-spaces 值的情况下，每个空格之后都可能发生软换行，因此下一行可能会以一个或多个空格开头。

正式定义

初始值collapse
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

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 break is 
    preserved          in the          heading     .</h2>

CSS

css
.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
}

结果

规范

规范
CSS 文本模块级别 4
# white-space-collapsing

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅