white-space: pre-wrap 是最稳妥方案，它保留用户输入的连续空格、制表符和换行符，同时允许自动折行，避免容器溢出，且需配合 overflow-wrap: break-word 处理超长无空格字符串。
white-space: pre-wrap 是最稳妥的 CSS 方案
用户输入的连续空格（比如从 textarea 或 API 返回的字符串）在直接插入 HTML 后会消失，根本原因是浏览器默认对所有空白字符做折叠。靠给每个空格手动替换成 不现实——既难维护，又容易误伤 HTML 标签内的空格，还可能引入 XSS 风险。
正确做法是：给目标容器（如 <div> 或 <code><td>）加 <code>white-space: pre-wrap，再用 textContent 或安全的 innerHTML 插入原始字符串。
-
pre-wrap保留所有空格、制表符和换行符，同时允许自动折行，不会撑破容器 - 比
pre更实用：后者不折行，一段长 JSON 或 URL 就会让布局崩溃 - 必须作用于块级或行内块元素；若目标是
<span></span>这类纯 inline 元素，需额外加display: inline-block - 别只写
style="white-space: pre-wrap"—— 动态内容多时，建议抽成 class 统一管理，避免漏写
用 textContent 赋值比 innerHTML 更安全
当空格来自用户输入或后端响应时，直接 innerHTML = str 有双重风险：一是未转义内容可能执行脚本，二是某些框架（如 React）会把 当普通文本渲染，反而失效。
推荐组合：element.style.whiteSpace = 'pre-wrap'; element.textContent = str;
-
textContent把字符串当纯文本处理，不解析任何 HTML 实体，天然防 XSS - 配合
white-space: pre-wrap，原始空格和换行全保留，且无需手动替换 - 如果必须用
innerHTML（比如内容含合法 HTML 标签），先做严格白名单过滤，再设white-space - 别用
str.replace(/ /g, ' ')处理动态内容——正则无法区分标签内/外空格，极易出错
表格单元格里空格消失？得加 overflow-wrap
在 <td> 中设 <code>white-space: pre-wrap 后，空格和换行确实能保留，但遇到超长无连字符字符串（如 Base64、URL、日志堆栈）仍会横向溢出，导致整行错位甚至出现滚动条。
这不是 white-space 的问题，而是缺少断词控制。
- 必须补上
overflow-wrap: break-word（或word-break: break-all，但后者语义更粗暴） - 完整写法：
<td style="white-space: pre-wrap; overflow-wrap: break-word">...</td> - 若内容含缩进（如代码树状结构），建议同步加
font-family: monospace，否则空格宽度不一致，对齐失效 -
pre-line在表格中基本没用：它把连续空格全合并，只剩换行生效，违背“保留连续空格”的初衷
为什么不用 批量替换？
有人试图在 JS 中遍历字符串，把每个 ASCII 空格替换成 ，看似直觉，实则埋坑。
- 用户输入里可能混有制表符
\t或换行符\n， - 正则
/ /g会误杀 HTML 标签里的空格，比如<div class="foo"> 中的空格被替换成 <code>，导致 class 解析失败 - 服务端若提前做了
textContent会原样显示 - 语义混乱：
真正麻烦的是混合场景：既要保留用户输入的缩进，又要支持富文本编辑中的加粗/链接。这时候得拆解空格语义——是排版需要？还是数据结构标记？前者靠 CSS，后者该用缩进字段或 AST 存储，而不是塞一堆 。
