html规范强制空白折叠，连续空格被压缩为一个；需用 、white-space属性或标签实现原样显示。
浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范强制规定的「空白折叠」行为；想让多个空格原样显示，必须用 、white-space CSS 属性或 <pre class="brush:php;toolbar:false;"></pre> 标签主动绕过它。
为什么直接敲空格键没用
HTML 解析器在构建 DOM 前，就把所有连续的空白字符（空格、制表符、换行）合并为单个空格。哪怕你在编辑器里写 hello<space><space><space>world</space></space></space>，最终渲染出来的就是 hello world。这个过程发生在解析阶段，和 CSS 字体、margin 完全无关。
常见错误现象：
- 在 Vue/React 模板中写
v-html或dangerouslySetInnerHTML却没做转义 → 可能被二次解析或触发 XSS - 用
- 在
<p></p>里写<pre class="brush:php;toolbar:false;">...</pre>→ HTML 规范禁止块级标签嵌套在<p></p>中，浏览器会自动闭合<p></p>
用 实现可控单空格
是唯一能保证“这里一定有一个可见空格”的实体，每个都独立、不可折叠、不可换行。适合小范围语义明确的间距控制，比如单位前、标题词间。
实操建议：
- 要三个空格？写
- 静态文本中控制在 1–4 个以内，超过建议换
white-space: pre-wrap - 在 React/Vue 中动态插入时，必须用
innerHTML赋值；textContent会把 - 别滥用：大量使用会让 HTML 可读性骤降，也违背语义化原则
用 white-space CSS 批量控制整段文本
这是更现代、更灵活的方式，尤其适合代码块、诗歌、日志等需要保留原始格式的场景。它不是“加空格”，而是告诉浏览器：“别动我原文里的任何空白”。
参数差异注意点：
-
white-space: pre：保留所有空白和换行，但不自动换行 → 长文本会溢出容器 -
white-space: pre-wrap：保留空白和换行，且允许自动换行 → 日常最推荐，兼顾可读性与响应式 -
white-space: pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求
性能影响很小，但别滥用：给整个 或长列表加 white-space: pre，会导致文本无法折行，破坏响应式布局。
<pre class="brush:php;toolbar:false;"></pre> 标签的适用边界
<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre 的快捷写法，自带等宽字体和 margin，语义上表示「预格式化文本」。
容易踩的坑：
-
<pre class="brush:php;toolbar:false;"></pre>默认用font-family: monospace→ 中文显示发虚、字号偏小，需手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 内容里有
、<code>>等符号，没做 HTML 转义 → 直接被解析为标签，导致结构错乱 - 用
<pre class="brush:php;toolbar:false;"></pre>包裹动态内容（如 API 返回的字符串），但忘了过滤或转义 → XSS 风险
真正容易被忽略的是上下文：静态 HTML 里用 最稳；动态生成内容时，white-space: pre-wrap + innerHTML 是更可持续的选择；而 <pre class="brush:php;toolbar:false;"></pre> 不是万能占位符，用错地方反而增加维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
