white-space: pre-wrap 是解决溢出与连续空格问题的唯一合理方案，它既保留源码中的空格、制表符和换行，又允许在容器边界自动折行，避免横向溢出，且兼容主流移动端浏览器。
white-space: pre-wrap 是解决溢出+连续空格的唯一合理组合
直接给文本容器加 white-space: pre-wrap，就能同时满足「保留原始空格」和「自动换行不溢出」两个条件。它不是“让空格显示出来”的补丁，而是从解析层接管空白行为：源码里几个空格、几个制表符、几处换行，全数保留；同时允许在容器边界处折行，不会横向撑破布局。
常见错误现象：white-space: pre 下空格是保留了，但长无空格字符串（如 base64 或超长 URL）直接横向溢出；white-space: normal 下能折行，但所有连续空格又被压成一个。
-
pre-wrap在 iOS Safari 和 Android Chrome 中兼容性完好（2026 年已覆盖全部主流 WebView） - 若容器本身设了
overflow: hidden或text-overflow: ellipsis，pre-wrap内容会被截断——此时需配合word-break: break-word，而非删掉pre-wrap - 别给整页或长列表加该样式，只作用于明确需要保留格式的文本块（如用户评论、日志输出、代码片段）
为什么 overflow-wrap: break-word 必须和 pre-wrap 配合用
overflow-wrap: break-word 本身不处理空格，它只负责在单词级无法折行时安全断开长串（比如一整段中文或 URL）。但它的生效前提是：文本得先被浏览器识别为“可折行内容”。而 white-space: pre 或未设 white-space 的默认行为，会让浏览器把整行当一个“不可拆分单元”，overflow-wrap 就完全失效。
所以真正起效的链路是：white-space: pre-wrap → 告诉浏览器“这些空格和换行我要，但你仍可在我容器右边界折行” → 此时 overflow-wrap: break-word 才有机会介入处理内部的超长无空格子串。
- 别用
word-break: break-all替代，它会在任意字符间切断，“身份证号”可能变成“身份 证号”，语义破坏严重 - 如果后端返回的是纯文本（非 HTML），且含
<code>>字符，务必先做 HTML 实体转义，否则pre-wrap会把未闭合标签当真实结构解析
表格单元格里空格溢出要额外注意 border-collapse
在 <td> 上设 <code>white-space: pre-wrap 后，空格能显示、也能折行，但视觉上可能“看不见”——因为 border-collapse: collapse 会让相邻单元格的 padding 和 border 叠加，掩盖空格间距。调试时最简单的方法是临时加 border: 1px solid red，看清真实内容边界。
- 避免给
<td> 包一层 <code><pre class="brush:php;toolbar:false;"></pre>：它会强制等宽字体 + 默认 margin，破坏表格流式对齐 - 如果单元格内容是固定字段对齐（如“姓名: 张三”），优先用
pre-wrap，更轻量、更可控 - 全角空格（U+3000）虽能绕过折叠，但在不同字体下宽度浮动大，iOS 系统尤其容易错位，正式项目禁用
- 若字符串来自用户输入或 CMS，且含
innerHTML赋值才能正确解析；用textContent会原样输出字面量 - 在 React/Vue 中，不要在模板里写
v-html="text"同时又手动拼 -
innerText和textContent都不解析 HTML，永远别指望它们显示连续空格
JavaScript 动态插入时，textContent 和 innerHTML 行为完全不同
用 JS 拼接带空格的字符串时：element.textContent = 'a' + ' '.repeat(3) + 'b' 渲染结果仍是 a b（一个空格）；必须用 innerHTML 才能让浏览器重新走 HTML 解析流程，识别并保留空格逻辑。
padding-left 或 text-indent；比如多列数据，应该用 CSS Grid 而非空格硬塞。空格问题十有八九是语义没理清，不是渲染没调好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
