浏览器默认压缩连续空格是HTML规范规定的空白折叠行为；需用 实体或white-space CSS属性（如pre-wrap）来保留多个空格，<pre>标签仅适用于预格式化文本场景。
浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范明确规定的「空白折叠」行为。想让多个空格原样显示，必须绕过这个默认规则——核心就两条路：用 实体硬塞，或者用 white-space CSS 控制解析方式。
为什么直接敲空格键没用
HTML 解析器会把所有连续的空白字符（空格、制表符、换行）合并为单个空格，再交给渲染引擎。哪怕你在编辑器里写了 hello<space><space><space>world，最终页面上就是 hello world。
- 这个行为发生在 HTML 解析阶段，和字体、CSS margin 无关
-
- 全角空格（如 U+3000）虽能显示多个，但属于汉字编码范畴，语义混乱、字体兼容性差，不推荐
用 实现可控空格
每个 渲染为一个不可折叠、不可换行的空格。适合小范围、语义明确的间距控制，比如单位前、标题词间。
- 写法必须是
&是&的实体，不能漏） - 要三个空格？写
- 在 React/Vue 中动态插入时，得用
innerHTML赋值，textContent会把 - 别滥用：大量使用会让 HTML 可读性骤降，也违背语义化原则
用 white-space CSS 属性批量控制
这是更现代、更灵活的方式，尤其适合整段文本保留格式（如代码块、诗歌、对齐文本）。
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre：完全保留空格和换行，但不自动换行——超宽内容会溢出容器 -
white-space: pre-wrap：保留空格和换行，且允许自动换行——日常最推荐，兼顾可读性与响应式 -
white-space: pre-line：合并连续空格，只保留换行——类似普通段落，只是换行生效 - 注意：
pre类属性会影响内联元素行为（比如<span>内的换行也会被保留），可能意外破坏布局
<pre> 标签的适用边界
<pre> 是最粗暴有效的方案：浏览器照源码原样渲染所有空白和换行。但它自带等宽字体和 margin，语义上表示「预格式化文本」。
- 适合代码片段、日志输出、ASCII 艺术等真正需要「原样复刻」的场景
- 如果只是想让普通段落多几个空格，强行套
<pre>会引入样式干扰，得额外重置font-family、margin等 - 它不能嵌套在
<p>里——HTML 规范禁止块级标签嵌套在<p>中
真正容易被忽略的是上下文：静态 HTML 里用 最稳；动态生成内容时，white-space: pre-wrap + innerHTML 是更可持续的选择；而 <pre> 不是万能占位符，用错地方反而增加维护成本。
