html默认空白折叠，连续空格被解析阶段压缩为一个；可用 实体或white-space:pre-wrap等css属性绕过，其中 最可靠，pre-wrap最常用。
HTML里敲十个空格，页面只显示一个——这不是浏览器抽风，是规范强制要求的空白折叠行为。想搞懂它怎么运作、为什么这样设计、以及哪些手段能绕过它，得从解析阶段开始看。
HTML解析器在词法分析时就合并了所有空白
浏览器加载HTML后，第一步不是渲染，而是构建DOM树；在这个词法分析阶段，所有连续的空白字符（U+0020空格、\t制表符、\n换行符、\r回车符）全被统一替换成单个U+0020，再把连续出现的多个U+0020压缩成一个。这个过程不可逆，发生在CSS和JS介入之前。
常见错误现象：
- 在
<pre class="brush:php;toolbar:false;"></pre>外写hello world，源码里三个空格，页面仍显示为hello world - 用
textContent读取元素内容时拿到的是已折叠后的字符串，不是原始HTML里的空格数
white-space属性控制的是渲染阶段的“怎么显示”，不是“有没有”
white-space不改变DOM中文本节点的内容，只告诉渲染引擎：对已经折叠好的那个空格，要不要保留、要不要换行、要不要截断。比如：
-
white-space: normal（默认）：允许换行，忽略首尾空白，连续空白压成一个 -
white-space: pre：完全按源码空格/换行显示，但不自动换行 -
white-space: pre-wrap：保留空格和换行，同时允许自动换行——这是最常用也最安全的选择
注意：pre标签本质就是white-space: pre的快捷写法，但它会带来额外的默认margin和字体变化，别只图方便套用。
实体才是唯一能在文本流中“钉住”空格的手段
对应Unicode U+00A0，是一个不可断行、不可折叠、不可忽略的空格字符。它不参与空白折叠，也不受white-space影响（除非显式设为white-space: nowrap之类极端值）。
使用场景：
- 数字与单位之间：如
10 kg，防止10和kg被拆到两行 - 缩写人名：如
P. T. Barnum，避免中间点被孤立在行首 - 需要精确空格数但又不想用
<pre class="brush:php;toolbar:false;"></pre>破坏布局时
容易踩的坑：
-
-
真正难的不是“怎么让空格显示出来”，而是判断该用 、white-space: pre-wrap还是重构结构——比如用display: inline-block加margin替代空格对齐，往往更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
