当前位置：首页 > 文章列表 > 文章 > 前端 > CSS white-space-collapse 怎么控制空白折叠：多行文本、保留换行与降级验收

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

来源：17golang原创 2026-08-26 00:25:19 0浏览收藏

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

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

实践要点

属性初始值是 collapse，并且会继承。
preserve-breaks 是“保留换行、折叠连续空格”的常用折中。
新属性不能替代兼容性检查，先写回退，再用真实浏览器验收。

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

一个评论框的内容，通常要换行，但用户连续敲出的多个空格不一定有排版意义；一段复制的终端输出则相反，空格可能决定列对齐。把两种内容都交给同一条 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 对应“保留空白且不自动换行”。不要为了追求新属性而把可读的旧写法全部改掉。