white-space: pre-wrap 是最稳的通用解法，它保留所有原始空格、制表符、换行，并允许自动折行， unlike pre 易撑破容器，兼容性好、语义干净、移动端可靠。
直接用 最快，但只适合静态、少量、语义明确的空格；真要保留连续空格或换行，必须靠 white-space: pre-wrap，否则移动端和现代浏览器大概率失效。
为什么 不能堆着用
它本质是“不可断行空格”，每个都算一个独立字符，不是排版工具。常见错误现象包括：写十次 导致 HTML 体积膨胀、在 Vue/React 模板里未转义被二次解析、中英文混排时宽度不一致（字体影响）。
- 数量控制在 1–4 个以内，超过建议换方案
- 别嵌套使用，比如
- 不用来缩进整段文字——语义错误，响应式下易溢出
- 它替代不了
margin或padding的布局功能，仅用于文本内微调
white-space: pre-wrap 是最稳的通用解法
这是目前兼容性最好、语义最干净、移动端表现最可靠的方式。它保留所有原始空格、制表符、换行，并允许自动折行，不像 pre 那样容易撑破容器。
- 适用场景：API 返回带缩进的 JSON/YAML、用户提交的日志、诗歌排版、富文本中需保留空格的段落
- 参数差异：
pre不换行 → 长文本溢出；pre-line合并空格 → 不满足“连续空格”需求；break-spaces新标准，Chrome 83+/Firefox 73+ 才支持，别当主力 - 注意父容器：若设了
overflow: hidden或text-overflow: ellipsis，可能截断内容，需加word-break: break-word
<pre class="brush:php;toolbar:false;"></pre> 标签不是“加空格专用”，而是有副作用的快捷方式
<pre class="brush:php;toolbar:false;"></pre> 默认启用 white-space: pre + 等宽字体 + 块级外边距，容易踩坑。
- 默认
font-family: monospace→ 中文发虚、字号偏小，得手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 内容含
<code>>未转义 → 被当 HTML 标签解析，结构错乱 - 动态内容（如用户输入）直接塞进去 → XSS 风险，必须先做 HTML 实体转义
- 想等效替代？用
<div style="white-space: pre-wrap;"> 更可控，无字体副作用 <h3>JS 动态插入空格时，<code>textContent和innerHTML行为完全不同用 JS 拼字符串时，空格不会自动保留，因为
textContent把' '当纯文本，innerHTML才会解析实体。-
element.textContent = 'a' + ' '.repeat(4) + 'b'→ 仍只显示一个空格 - 正确做法一：改用
innerHTML并转义：element.innerHTML = 'a' + ' '.repeat(4) + 'b' - 正确做法二：优先走 CSS 控制：
element.style.whiteSpace = 'pre-wrap'; element.textContent = 'a b'; - JS 字符串里写
' '（&要转义），或用 Unicode：'a\u00A0\u00A0\u00A0b'
真正难的不是让空格显示出来，而是判断该用语义化布局（
padding、flex）、还是格式化文本（pre-wrap）、还是字符级控制（ -
