浏览器默认压缩连续空格是html规范的空白折叠行为；需用 实体或white-space css（如pre-wrap）来保留空格，标签仅适用于预格式化文本场景。
浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范强制规定的「空白折叠」行为；想让它原样显示，必须显式绕过该规则——核心就两条路： 硬塞，或用 white-space CSS 控制解析方式。
为什么直接敲空格键没用
HTML 解析器在渲染前就把所有连续空白字符（空格、制表符、换行）合并为单个空格，再交给样式引擎。哪怕源码里写 hello world，最终页面上就是 hello world。这个过程发生在解析阶段，跟字体、margin、padding 都无关。
常见错误现象：
- 在 Vue 模板里写
{{ item.name }} {{ item.value }}，但父容器用了v-html却没转义 → - 用
textContent = 'a' + ' '.repeat(4) + 'b'→ 依然只显示一个空格，因为textContent不解析 HTML 实体 - 在 React 中用
dangerouslySetInnerHTML插入含 不被识别，直接输出为文字
用 实现小范围精确空格
是唯一能保证“这里一定有一个可见空格”的实体，每个都不可折叠、不可换行，适合词间微调、单位前留空等语义明确的场景。
实操建议：
- 静态文本中控制在 1–4 个以内；要 3 个空格就写
- 在 React/Vue 动态插入时，必须通过
innerHTML或v-html渲染，textContent会原样输出字符，不解析 - 中英文混排时宽度不一致（依赖字体），需要等宽对齐优先考虑
white-space: pre，而非堆 - 别嵌套使用，比如
用 white-space CSS 批量控制整段文本
这是更现代、更可持续的方式，尤其适合代码块、日志、诗歌等需保留原始格式的场景。它不是“加空格”，而是告诉浏览器：“别动我原文里的任何空白”。
参数差异与适用场景：
-
white-space: pre：保留所有空格和换行，但不自动换行 → 超宽内容会溢出容器，适合短代码片段 -
white-space: pre-wrap：保留空格和换行，且允许自动换行 → 日常最推荐，兼顾可读性与响应式 -
white-space: pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求，慎选
容易踩的坑：
- 给长列表或整个
body加white-space: pre，会导致文本无法折行，破坏响应式布局 -
pre类属性会影响内联元素行为（如<span></span>内的换行也会被保留），可能意外撑开行高 - 后端返回带缩进的 JSON 字符串，前端直接
innerHTML插入时，若未设white-space: pre-wrap，缩进全丢失
<pre class="brush:php;toolbar:false;"></pre> 标签不是万能占位符
<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre 的快捷写法，自带等宽字体和上下 margin，语义上表示「预格式化文本」。
适用边界：
- 适合代码、日志、ASCII 图形等真正需要「原样复刻」的场景
- 不适合普通段落仅为了多几个空格——强行套
<pre class="brush:php;toolbar:false;"></pre>会引入字体发虚、字号偏小、margin 干扰等问题，得额外重置font-family和margin - 不能嵌套在
<p></p>里，HTML 规范禁止块级标签嵌套在<p></p>中 - 内容来自用户输入或 API 时，
<pre class="brush:php;toolbar:false;"></pre>本身不提供 XSS 防护，必须先做 HTML 转义
真正容易被忽略的是上下文：静态 HTML 里用 最稳；动态生成内容时，white-space: pre-wrap + innerHTML 是更可持续的选择；而 <pre class="brush:php;toolbar:false;"></pre> 不是占位符，用错地方反而增加维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
