html解析阶段即完成空白合并，连续空白字符统一转为单个空格并写入dom；textcontent反映该结果，不可逆；仅标签内保留原始空白；white-space仅影响渲染，不改变dom值。
HTML解析阶段就已完成空白合并
浏览器在构建DOM树的解析阶段，不是渲染时，就把所有连续空白字符（\s：空格、\t、\n、\r、\f）统一转为U+0020，并压缩成单个空格。这意味着：textContent读出来的值已经是“被处理过”的结果，无法还原原始换行或缩进。
例如：<p>Hello\n\t World</p> 解析后，其 textContent 是 "Hello World"，不是 "Hello\n\t World"。
这个过程对开发者是透明且不可逆的——你不能通过JS“阻止”它发生，只能在它之后做适配。
哪些标签内部能绕过默认空白合并
只有少数语义明确的标签会跳过解析阶段的空白压缩，它们的内容保持原样进入DOM：
-
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>：保留所有空格、制表符、换行符 -
<script></script>、<style></style>：空白影响语法或注释结构，不参与压缩
注意：<code> 本身**不**具备该能力，它只是语义标签；若需保留格式，必须嵌套在 <pre class="brush:php;toolbar:false;"></pre> 内，或配合 white-space: pre-wrap 使用。
用 white-space 控制渲染行为，但改不了 DOM 值
CSS 的 white-space 属性作用于渲染阶段，它不能改变已压缩的 textContent，只影响如何显示那个“已被压缩过的字符串”：
-
white-space: normal（默认）：继续折叠 + 自动换行 -
white-space: pre：保留全部空白和换行，禁止换行（类似<pre class="brush:php;toolbar:false;"></pre>视觉效果） -
white-space: pre-wrap：保留空白和换行，但允许容器内自动换行——这是最实用的折中方案 -
white-space: pre-line：合并连续空白，但保留换行符（\n仍起作用）
关键点：innerText 会受 white-space 影响，而 textContent 不会——后者永远反映解析后的 DOM 真实值。
动态插入 HTML 时最容易踩的空白坑
用 JS 拼接字符串插入 DOM（如 element.innerHTML = `<span>A</span>\n<span>B</span>`），如果两个 <span></span> 是 inline 或 inline-block，源码中的换行会被解析为一个空格，导致 A 和 B 之间出现约 4px 间隙。
安全做法有三种：
- 模板字符串严格连写：
`<span>A</span><span>B</span>`（无换行、无空格） - 容器设
font-size: 0，子元素再设回正常字号（注意inputplaceholder 兼容性） - 用
display: flex替代inline-block，天然消除间隙
别指望正则全局替换 \s+ 来“清理”HTML 字符串——它会误伤 <pre class="brush:php;toolbar:false;"></pre>、<script></script> 里的内容，也搞不定属性值中合法的空格（如 class="a b"）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
