HTML解析阶段即合并空白，DOM中已无原始空格换行；textContent反映的是已压缩后的结果，该过程不可逆，仅、等特殊标签内部保留原始空白。
浏览器在解析 HTML 时，会把连续空格、换行、制表符等空白字符统一折叠为单个空格——这不是 bug，是 HTML 规范强制要求的行为，JavaScript 读到的 textContent 已是折叠后的结果，无法还原原始空白。
为什么 textContent 拿不到原始空格
HTML 解析器在构建 DOM 树阶段就完成了空白折叠：所有连续空白（\s+）被转为 U+0020，并压缩成一个空格。这个过程不可逆，且发生在 DOM 节点创建时，不是渲染层的视觉欺骗。
-
<p>hello<span> </span> world</p>中普通空格全被压成一个，但 -
<pre class="brush:php;toolbar:false;"> a b </pre>内部空白不参与折叠，因为<pre class="brush:php;toolbar:false;"></code> 是预格式化上下文</li> <li><code><script>console.log("a\nb");</script></code> 里的换行也不会被折叠，JS 字符串字面量不受 HTML 解析影响</li> </ul> <H3>想显示多个空格，该用 <code> </code> 还是 <code>white-space</code></H3> <p>二者适用场景完全不同：<code> </code> 是语义级占位，适合小范围控制（如单词间加两个空格）；<code>white-space</code> 是样式级控制，适合整块文本保留格式。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>用 <code> </code>：写 <code> </code> 就是三个不可断开空格，不会被折叠，也不依赖 CSS</li> <li>用 <code>white-space: pre</code>：整段文本按源码排版，但会禁用自动换行，可能溢出容器</li> <li>用 <code>white-space: pre-wrap</code>：更实用，保留空格和换行，同时允许软换行</li> <li>别用 <code>white-space: normal</code> 去“修复”——它就是默认值，什么也改不了</li> </ul> <H3><code>element.normalize()</code> 能不能清理多余空格</H3> <p>不能。它只处理 DOM 节点结构，不修改文本内容中的空格数量。</p> <ul> <li><code>normalize()</code> 会合并相邻 <code>Text</code> 节点，比如 <code>"a"</code> + <code>"b"</code> → <code>"ab"</code></li> <li>它会移除 <code>nodeValue === ''</code> 的空文本节点（比如只含换行的节点），但不会把 <code>"a b"</code> 变成 <code>"a b"</code></li> <li>对未挂载元素调用无效：<code>const el = document.createElement('div'); el.normalize();</code> —— 无子节点，啥也不做</li> <li>字符串上没有 <code>.normalize()</code> 方法：<code>" a ".normalize()</code> 直接报错</li> </ul> <H3>用正则或工具压缩 HTML 时要注意什么</H3> <p>粗暴替换 <code>\s+</code> 极易破坏内容，尤其在特殊标签内部。</p> <ul> <li><code>html-minifier</code> 的 <code>collapseWhitespace: true</code> 是安全的，它模拟浏览器逻辑，跳过 <code><pre class="brush:php;toolbar:false;"></code>、<code><script></code> 等上下文</li> <li>自己写正则删换行前，必须先排除 <code><pre class="brush:php;toolbar:false;">.*?</pre>、<script>.*?</script>等区块 - 属性值里的空格（如
class=" a b "）被压成class="a b"通常没问题，但若后端校验data-*值含特定空格数，就可能出错 - 内联元素间有意图的空格（如
<span>A</span> <span>B</span>）删掉后会变成 AB，需改用word-spacing
最常被忽略的一点：你以为在源码里敲了五个空格，其实从解析开始它就不再是五个了；后续所有操作（JS 读取、CSS 控制、DOM 操作）都基于这个已折叠的文本值，而不是你写的源码。
