浏览器默认压缩连续空白符为单个空格，属html规范的“空白折叠”；需用 或white-space属性（如pre-wrap）保留多空格，避免滥用空格做布局。
浏览器默认会把连续空格、制表符、换行符全部压缩成一个空格，这不是 bug，是 HTML 规范定义的「空白折叠」（whitespace collapsing）。想让多个空格原样显示，得绕过这个机制——核心就两条路： 逐个替换，或用 white-space 控制整块文本的解析行为。
为什么直接敲空格没用
HTML 解析器在构建 DOM 前，先对源码做标准化处理：所有连续空白字符序列（包括空格、\t、\n）被收编为单个空格节点。哪怕你写 <p>hello world</p>，只要中间夹了普通空格，它照样被压。
- 普通空格键输入的空格，在源码里是 ASCII
0x20，和 -
U+00A0，语义为「不可断行空格」，浏览器不参与折叠 - 用
用 手动插入空格的适用场景
适合少量、确定位置、有语义需求的空格，比如单位前、人名中间、防止换行断裂。
- 数字和单位之间：写
100 px，避免100和px被拆到两行 - 中文标题中英文混排：如
React + TypeScript，保证加号两边各一个固定空隙 - 别堆十个
用 white-space CSS 属性批量控制
这是更现代、更可控的方式，尤其适合代码块、诗歌、日志输出等需要保留原始格式的文本。
-
white-space: pre：完全按源码渲染，空格、换行全保留，但不自动换行（可能溢出容器） -
white-space: pre-wrap：推荐首选，保留空格和换行，同时允许长单词或超宽内容正常折行 -
white-space: pre-line：只保留换行符，空格仍会被折叠成单个——不适合多空格需求 - 注意：该属性作用于元素自身及其后代，不需要在每个子标签里重复写
什么时候该用 <pre class="brush:php;toolbar:false;"></pre> 标签
<pre class="brush:php;toolbar:false;"></pre> 本质是给 white-space: pre 套了个语义壳，它自带等宽字体和预格式化含义。
- 展示代码片段、终端输出、ASCII 图时，用
<pre class="brush:php;toolbar:false;"></pre>最自然，语义清晰 - 如果不想用等宽字体，必须显式覆盖：加
font-family: inherit或指定其他字体 - 不要为了“多两个空格”就套
<pre class="brush:php;toolbar:false;"></pre>——它会改变默认字体、行高、内外边距，容易引发意外样式污染
最易被忽略的一点：空格问题从来不是孤立的。如果你在调试时发现空格没生效，先检查父容器是否设置了 font-size: 0（常见于 inline-block 布局 hack），或者是否被 CSS 的 text-rendering: optimizeLegibility 干扰——这些都会间接影响空格的视觉表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
