CSS white-space-collapse 怎么控制空白折叠：多行文本、保留换行与降级验收

前端页面里，用户备注、复制来的命令和多行说明经常同时包含连续空格与换行。以前一律写 white-space: pre-wrap，遇到“只保留换行但不保留一串空格”或“空格也要参与换行”时，就只能靠额外清洗文本。white-space-collapse 把“空白怎么折叠”单独暴露出来，正好适合把这类规则说清楚。

普通正文用 collapse；需要保留用户换行用 preserve-breaks；代码或对齐文本用 preserve；要让每个保留空格都参与尺寸和换行判断，再考虑 break-spaces。生产代码仍应保留旧版 white-space 回退。

先把调用方真正需要的文本状态分开

一个评论框的内容，通常要换行，但用户连续敲出的多个空格不一定有排版意义；一段复制的终端输出则相反，空格可能决定列对齐。把两种内容都交给同一条 CSS 规则，最终会出现“评论挤成一行”或“代码块宽度异常”的问题。

white-space-collapse 只负责空白折叠，是否允许自动换行还可以由 text-wrap-mode 或旧的 white-space 一起决定。它的默认值是 collapse，属性会继承到子元素。

五个值分别改变了什么

collapse：正文的默认选择

连续空格会合并，源码中的换行也按普通空白处理，文本按容器宽度换行。新闻正文、商品说明和普通表单回显通常从它开始。

preserve-breaks：保留段落感，不放大空格

连续空格仍会折叠，但换行符保留。用户在备注框里按回车分段时，这个值比直接使用 pre 更容易控制宽度。

preserve：代码和对齐文本

空白序列与换行都保留，效果接近旧的 white-space: pre。如果内容可能很长，记得单独处理横向滚动或换行策略。

preserve-spaces 与 break-spaces

前者保留空格，但会把制表符和换行转换为空格；后者在保留空白的基础上，让每个空白都占据尺寸，并在空白之间提供断行机会。它们不是“更强的 pre-wrap”，应先用实际内容测试最小宽度和末尾空格。

用最小配方处理用户备注和代码片段

下面的写法把新属性放在增强层，同时保留一条旧浏览器可识别的声明。这里的关键不是把五个值全部用上，而是让内容模型和 CSS 选择一致。

.user-note {
  /* 旧浏览器和未实现新属性的回退 */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@supports (white-space-collapse: preserve-breaks) {
  .user-note {
    white-space-collapse: preserve-breaks;
    text-wrap-mode: wrap;
  }
}

.code-snippet {
  white-space: pre;
  overflow-x: auto;
}

@supports (white-space-collapse: preserve) {
  .code-snippet {
    white-space-collapse: preserve;
    text-wrap-mode: nowrap;
  }
}

如果项目仍以传统 white-space 为主，也可以用简写表达同一意图：white-space: pre-line 对应“保留换行并折叠空格”，white-space: pre 对应“保留空白且不自动换行”。不要为了追求新属性而把可读的旧写法全部改掉。

兼容处理要看内容，不只看属性表

该属性在较新的浏览器中可用，但旧设备和内嵌 WebView 仍可能只认识 white-space。建议按三层处理：第一层写可接受的旧语法，第二层用 @supports 增强，第三层在目标浏览器中检查换行、横向滚动和末尾空格。

特别要注意 HTML 源码本身。如果服务端在进入浏览器前已经把换行或多个空格清洗掉，CSS 没有办法把丢失的字符恢复出来；富文本渲染还要先确认转义与安全过滤，再谈显示效果。

上线前做一次可复现的视觉验收

1. 准备四组输入：连续空格、源码换行、制表符、很长的连续字符串。
2. 分别在支持与不支持新属性的浏览器中打开相同页面，记录文本行数、容器高度和是否出现横向滚动。
3. 把容器宽度改成手机宽度，再检查 preserve 是否撑破卡片；代码区若允许滚动，要确认滚动条不会被父级裁掉。
4. 给备注内容追加一行空文本，观察末尾空格是否改变高度；这一步最容易暴露 break-spaces 的尺寸差异。

如果回退状态已经满足业务要求，就不必为了统一视觉强行启用全部新值。CSS 新能力的价值在于让规则更精确，兼容层的价值则是让旧客户端仍有可接受结果。

常见问题

white-space-collapse 能替代 white-space 吗？

不能完全替代。它只控制折叠方式，换行模式还需要 text-wrap-mode；而旧项目中 white-space 仍是更广泛可识别的简写。

为什么设置了 preserve-breaks 仍然没有换行？

先确认 DOM 中确实存在换行字符，再检查是否被 HTML 解析、服务端清洗或组件层重新拼接。还要查看容器是否被固定高度、overflow 或其他布局规则裁剪。

什么时候应该用 break-spaces？

只有在每个保留空格都需要参与尺寸与断行时再用，例如需要保留精确空白的编辑器预览。普通备注和代码展示优先从 preserve-breaks 或 preserve 开始。

把选择收敛成一条规则

正文选 collapse，用户多行输入选 preserve-breaks，代码和对齐内容选 preserve，特殊空白布局再评估 break-spaces。发布前保留 white-space 回退，并用真实输入检查行数、宽度和容器高度，这比只看一张静态示例图更可靠。