这是html规范行为：浏览器在解析阶段将连续空格、制表符、换行符统一压缩为单个空格并忽略首尾空白，所有主流浏览器均遵循此规则。
为什么多个空格在页面上只显示一个
这不是浏览器 bug，是 HTML 规范行为：连续的空格、制表符、换行会被合并成单个空格，首尾空白也会被忽略。你在源码里敲 10 个空格或换行，渲染结果就是 1 个空格——哪怕你用的是 Chrome、Firefox 或 Safari，全都一样。
- 常见错误现象：
<pre class="brush:php;toolbar:false;"></pre>包裹纯文本却没缩进，因为原始内容根本没空格 - 别指望靠“多敲空格”实现对齐，这在响应式布局里极易错乱
- 如果空格显示为小方块（），大概率是用了 Unicode 不间断空格（如
\u2007）但字体不支持，或文件编码不是 UTF-8
用 快速插单个不可折行空格
是最轻量的方案，适合防断行或微调间距，但它不是“空格放大器”。
- 只能替代一个空格宽度，要三个空格就得写三遍：
- 不能嵌套：
- 在 Vue/React 的
v-html或dangerouslySetInnerHTML中直接写，必须确保内容已转义，否则有 XSS 风险 - 语义上它代表“此处不该换行”，比如
Mr. Smith，别用它缩进整段文字
用 white-space: pre-wrap 保留原始空格并允许换行
这是现代项目中最推荐的 CSS 方案，比堆 或滥用 <pre class="brush:php;toolbar:false;"></pre> 更干净、可维护。
-
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 + 默认等宽字体，它解决的是“原样渲染原始空白”的问题，不是专门加空格的。
- 默认
font-family: monospace→ 中文显示发虚、字号偏小，需手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 内容含
、<code>>等符号却未转义 → 直接被解析为标签，结构崩坏 - 动态内容（如 API 返回的字符串）直接塞进
<pre class="brush:php;toolbar:false;"></pre>→ 有 XSS 风险，必须先过滤或转义 - 纯静态示例代码可用，但用户输入或富文本场景优先用
div+white-space: pre-wrap
\u3000），也可能是 CSS 指定了不支持该 Unicode 字符的字体，还可能 <meta charset="UTF-8"> 没写在 white-space 和 font-family，比盲目试方案快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
