空白折叠：源码里的空格去哪儿了
HTML 源码里连敲八个空格，页面上只剩一个——这是浏览器的 空白折叠(white space collapsing)。它处理的其实是两个独立问题：其一是源码里的 空格 / Tab / 换行符 留不留（折叠规则）；其二是一行放不下时 允不允许软折行。老的
white-space 用一个值同时管两件事，css-text-4 把它拆成了两个子属性：white-space-collapse 管折叠，text-wrap-mode 管折行，white-space 从此降级为两者的 shorthand。
下面的源文本里埋了 连续空格、字面换行符和一个 Tab（在源文本视图里可视化标出）。两组按钮分别切 white-space-collapse × text-wrap-mode，渲染结果实时变化；下方「等价写法」面板同步给出当前组合对应的 shorthand 与 老单值写法（若存在）。不支持的取值会被
CSS.supports() 实测点名并禁用。
1 · 新两值 × 老单值：映射表
老 white-space 的每个单值关键字，如今都定义为 white-space-collapse + text-wrap-mode 的组合别名。反过来，新写法能表达的组合 比老单值更多（如 preserve-breaks nowrap 就没有对应的老关键字）：
text-wrap-mode 同时属于两个 shorthand。 它也是 text-wrap shorthand 的一部分：text-wrap = text-wrap-mode(wrap / nowrap)+ text-wrap-style（balance / pretty / stable，见 折行与断词 页）。也就是说
white-space 与 text-wrap 这两个 shorthand 共享 同一个子属性 text-wrap-mode——后写的会覆盖先写的，排查样式时要留意。
collapse 模式下「换行当空格」对 CJK 的副作用。 模板里为了可读性把一句中文拆成多行，collapse 模式会把换行符变成一个空格——西文无感，中文句子中间却会凭空多出一个空格。这正是 css-text-4 定义「segment break transformation」时讨论的问题：规范允许在两个 CJK 字符之间把这个空格 移除，各浏览器已陆续实现。切到 preserve-breaks 可以直接看到换行符被保留的对照效果。