white-space: pre-wrap 是最稳妥的CSS方案，它保留所有空格、制表符、换行符并允许自动换行，不溢出容器且不破坏布局，比 pre 更实用、比 pre-line 更可控。
HTML里按空格键打的多个空格，浏览器一定会合并成一个——这不是bug，是规范行为，无法用JavaScript读取原始空格，也不能靠删空格或加 硬凑解决。
white-space: pre-wrap 是最稳妥的CSS方案
它在保留所有空格、制表符、换行符的同时，允许内容自动换行，不溢出容器，也不破坏布局。比 pre 更实用，比 pre-line 更可控。
- 直接加在需要保留格式的容器上，比如
<div class="log-output">...</div>，然后设white-space: pre-wrap; - 别设在
<body>或全局选择器上，否则按钮文字、导航栏链接里的空格也会“变硬”，影响对齐和可访问性 - 注意：这个属性只改渲染效果，
textContent读出来的仍是压缩后的单空格，JS逻辑不能依赖它还原原始输入
用 <pre> 标签要小心语义和样式继承
<pre> 内部默认启用 white-space: pre;，能原样显示缩进和空格，但它自带 font-family: monospace 和无 margin/padding 的样式，容易打破现有设计。
- 如果只是想保留空格，又不想改字体，必须显式重置：
pre { font-family: inherit; margin: 0; padding: 0; } -
<pre>不适合嵌套在段落中使用，比如<p>结果：<pre> x y </pre></p>会破坏块级流，建议用<span>+ CSS 替代 -
<pre>对 SEO 和屏幕阅读器有明确语义（表示预格式化文本），误用可能影响可访问性
只适用于单个空格，且不可叠加控制宽度
是不换行空格（U+00A0），浏览器不会合并它，但它的宽度固定为一个标准空格，且不能通过 CSS 调整字宽或缩放。
立即学习“前端免费学习笔记（深入）”；
- 想实现「两个空格宽」？写两个
- 混用
font-family切换时 - 服务端模板中大量插
JavaScript 无法还原原始空格，别白费力气
DOM 构建阶段就已把连续空白（包括 \n、\t、多个 ）压缩为单个 U+0020，textContent 和 innerText 返回的都是这个结果，且不可逆。
- 不要试图用
innerHTML.replace(/\s+/g, ' ')去“标准化”空格——它会把<script>或<textarea>里的合法换行也干掉 - 如果后端传来的文本含关键缩进（如 YAML/JSON 片段），应在传输层用
JSON.stringify()或 base64 编码，而不是靠前端“抢救”空格 - 用户输入场景（如
<textarea>）本身不参与空白合并，但一旦把值塞进<p>，就立刻被压缩——这时必须靠white-space控制显示，而非修改字符串
真正难处理的不是怎么“显示空格”，而是判断哪些空格本就有语义（比如代码缩进、日志对齐）、哪些只是作者随手敲的排版空格。前者必须用 white-space: pre-wrap 配合容器隔离，后者其实根本不需要保留。
