HTML解析阶段即合并空白，DOM中已无原始空格换行；pre标签靠white-space: pre渲染时保留格式，但无法恢复解析时丢失的空白；white-space仅影响渲染，不改变DOM结构。
HTML解析阶段就完成空白合并，不是渲染时才处理
HTML中连续空格、制表符\t、换行符\n或回车符\r，在浏览器构建DOM树时就被压缩成单个空格——这个动作发生在解析（parsing）阶段，而非样式计算或渲染阶段。这意味着哪怕你用JavaScript动态读取textContent，拿到的也是已被合并后的字符串。
常见错误现象：document.querySelector('p').textContent返回"Hello World"，即使源码写的是<p>Hello<span></span> World</p>，中间三个空格+换行仍被抹平。
- 所有文本节点内的空白都会被合并，包括元素开头/结尾的缩进
- 属性值中的空白也会被压缩（如
class=" container main "→class="container main"） - 这种行为无法通过CSS逆转，因为DOM结构里已经没有原始空白了
为什么<pre>能保留换行和空格
<pre>标签之所以“看起来”没被合并，是因为它默认带有white-space: pre样式，而该CSS规则作用于渲染阶段——它不改变DOM中已合并的空白，而是让浏览器在绘制时按原样排版。但注意：如果DOM里原本就没有换行（比如JS拼接字符串时没加\n），<pre>也救不回来。
使用场景：展示代码、日志、ASCII艺术等需要严格格式对齐的内容。
立即学习“前端免费学习笔记（深入）”；
-
<pre>内部的文本必须包含真实换行符\n才能生效 - 不要指望
<pre><span>foo</span><span>bar</span></pre>自动换行——<span>之间没\n，照样挤在同一行 - 若需自动换行又保留空格，改用
white-space: pre-wrap
white-space各值对DOM与渲染的实际影响差异
white-space只控制渲染行为，不影响DOM结构。它的取值决定了浏览器如何解释已存在的空白字符，而不是“恢复”被解析器删掉的空白。
关键参数差异：
-
normal：默认值，合并空白，忽略换行，允许自动换行 -
pre：保留所有空白和换行，但禁止自动换行（可能溢出容器） -
pre-wrap：保留空白和换行，同时允许自动换行（最常用） -
pre-line：合并空格，但保留换行符（换行符转为
效果） -
nowrap：合并空白，忽略换行，禁止自动换行
性能影响很小，但pre类值会禁用部分文本优化逻辑，在超长纯文本中可能略慢于normal。
想保留源码换行？别依赖格式，得靠数据本身
很多人误以为把HTML写成多行缩进就能控制显示效果，其实那只是编辑器里的视觉辅助。真正起作用的是文本内容是否含\n，以及容器是否启用对应white-space。
容易踩的坑：
- 用JS生成HTML时，字符串拼接漏掉
\n，再套pre-wrap也没用 - 从API返回的纯文本含
\n，但没设white-space，结果全挤成一行 - 用
word-spacing或letter-spacing调整宽度
复杂点在于：空白处理横跨解析、DOM、CSS三个层面，任何一环断掉，效果就不可预期。最稳妥的做法是——让数据带换行，让CSS告诉浏览器怎么画，别指望HTML格式本身能当布局工具。
