CSS white-space-collapse 的 preserve-spaces 为什么让行宽计算变了

我第一次把旧的 white-space: pre-wrap 拆成更细的属性时，最容易误判的是 white-space-collapse: preserve-spaces：页面看起来只是“把空格留下来”，实际却会让文本占用更多水平空间，进而改变换行位置，甚至把一个原本能收缩的网格列撑开。

原因可以先记成一句话：preserve-spaces 保留连续空白序列，但会把制表符和换行段转换为空格。空白不再被折叠成一个占位，行盒计算自然可能变宽；它和 preserve、break-spaces 也不是同一种行为。

官方参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space-collapse

先把 preserve-spaces 的动作拆开

这个属性控制元素内部的空白如何折叠，初始值是 collapse，并且会继承。切换到 preserve-spaces 后，连续的空格不再合并；制表符和段落分隔符则按规则转换为空格。它保留的是“空白字符占用的语义”，不是把原始字符序列原封不动地当成不可处理的字节流。

这一区别很关键。假设一行里有四个连续空格，默认的 collapse 只会按一个空白机会参与布局；换成 preserve-spaces 后，这四个空格都要参与文本的水平占用。字体、字号和字距不变时，行盒需要容纳的内容也就增加了。

用最小示例看出宽度为什么变

排查时不要一开始就把字体、letter-spacing、Flex 或 Grid 全部改一遍。先保留同一段文字，只切换空白折叠值，再观察文本是否在相同容器宽度下提前换行。

  A    B
  C


  A    B
  C

.sample {
  inline-size: 12rem;
  border: 1px solid #cbd5e1;
  padding: 0.75rem;
  font: 1rem/1.6 ui-monospace, SFMono-Regular, monospace;
}

.sample--collapse {
  /* 默认把连续空白压缩，适合普通段落和标签文本。 */
  white-space-collapse: collapse;
}

.sample--preserve {
  /* 保留连续空格；换行段按属性规则转成空格。 */
  white-space-collapse: preserve-spaces;
}

上面的 HTML 中，源代码里的缩进和多余空格会进入文本节点。使用 collapse 时，连续空白被压缩，内容更容易留在同一行；使用 preserve-spaces 时，这些空格会变成真实的水平占用，文本可能更早换行。

如果外层还使用了 inline-size: max-content、min-width: max-content 或者没有可用的断行点，变化会更加明显。这里的“行宽变了”通常不是属性偷偷修改了容器宽度，而是内容的固有尺寸参与计算时包含了更多空白。

为什么 preserve-spaces 和 preserve 不能随便互换

preserve 同时保留空白序列和段落分隔符；preserve-spaces 则保留空白序列，但把制表符和段落分隔符转换为空格。前者更接近“文本中的换行也有意义”，后者更像“只保留空格的数量，换行不单独承担断行语义”。

所以，想展示用户输入中的缩进，又不想让源字符串里的换行直接形成独立行时，可以考虑 preserve-spaces；想原样显示多行文本，则要重新评估 preserve 或旧写法 white-space: pre-wrap。不要只因为两个值都带有 preserve 就把它们当作同义词。

几个取值怎么按约束做选择

我通常按三个约束来选：空白数量要不要保留、换行要不要保留、空格之间要不要成为断行机会。把这三个问题分开后，宽度异常就不容易被“属性名字很像”带偏。

特别要留意 break-spaces：保留的空格会占用空间，并且在每个保留空格后都存在断行机会，空格也会影响 min-content 和 max-content 等固有尺寸。它解决的是“长串空格不能合理断开”的另一类问题，不是 preserve-spaces 的加强版。

遇到容器被撑开时，按这个顺序排查

1. 先确认空白来源。检查模板缩进、服务端拼接字符串和用户输入里是否真的有连续空格或制表符。不要只看视觉效果，源文本中的空白数量可能比页面上看到的多。
2. 再确认继承关系。属性会继承，父节点设置的 preserve-spaces 可能影响子节点。可以在真正承载文本的节点上显式设置 collapse，判断问题是否来自继承。
3. 检查固有尺寸约束。如果列宽、按钮宽度或 Flex 项使用了 max-content，保留下来的空格会直接进入尺寸计算。必要时给布局项明确的 min-width: 0，并单独设计文本的断行策略。
4. 最后决定语义。普通文案回到 collapse；需要多行原样展示时考虑 preserve；需要空格间断行时考虑 break-spaces。不要用一个全局值覆盖所有文本类型。

.card__text {
  /* 卡片文案不需要保留模板缩进，避免空白参与宽度计算。 */
  white-space-collapse: collapse;
  overflow-wrap: anywhere;
}

.code-preview {
  /* 代码预览需要保留空格和换行，使用更明确的预格式化语义。 */
  white-space-collapse: preserve;
  overflow: auto;
}

实际项目里适合怎么落地

preserve-spaces 适合边界比较明确的内容：例如需要保留缩进层次、但不希望输入换行直接变成新行的文本块。它不适合当作全站默认值，因为模板格式化留下的空格、不可见制表符和固有尺寸布局会一起放大排版差异。

更稳妥的做法是让普通内容继续使用 collapse，在需要特殊空白语义的组件上局部声明，并把组件的宽度、断行和溢出策略写在同一层。这样以后换成 preserve 或 break-spaces 时，影响范围也比较容易控制。

相关问题

preserve-spaces 能完全替代 white-space: pre-wrap 吗？

不能直接画等号。pre-wrap 同时涉及空白折叠和换行策略，而 white-space-collapse 只负责空白如何处理，换行还要结合 text-wrap-mode 等属性考虑。

为什么只加 preserve-spaces，文本没有按原样换行？

因为它会把换行段转换为空格，并不等于保留换行符本身。需要保留换行语义时，应重新评估 preserve 或组合使用相关文本属性。

空格变多后，为什么 Grid 列也跟着变宽？

当轨道或子项参与 min-content、max-content 等固有尺寸计算时，保留下来的空格属于内容占用的一部分。先检查固有尺寸约束，再决定是否需要 min-width: 0 或更明确的断行规则。

把 preserve-spaces 当成“保留空格数量”的局部工具会更准确：它确实能保留连续空白，但也会让这些空白进入行宽和固有尺寸的计算。只要先确认文本语义，再选择 collapse、preserve 或 break-spaces，这类宽度异常通常就能稳定定位。