浏览器压缩连续空格是HTML解析器在词法阶段的规范行为，非bug；解决方法只有两种：用 硬塞或用white-space CSS属性接管解析逻辑。
浏览器默认压缩连续空格是规范行为，不是 bug；要调整显示规则，核心只有两条路：用 硬塞，或用 white-space CSS 属性接管解析逻辑。
为什么直接敲空格键没用
HTML 解析器在词法阶段就把所有连续空白（空格、制表符、换行）统一压缩成单个 U+0020，这个过程发生在渲染之前。你写 <p>hello<space><space><space>world</p>，最终 DOM 中的文本节点内容就是 "hello world"——不是样式问题，是结构已被改写。
常见错误现象：
– 在 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 里直接插带空格字符串，依然只显示一个空格
– 给 <span> 加 white-space: pre-wrap 没反应 → 它默认是 inline 元素，white-space 对其生效，但若父容器有 text-align: justify，可能干扰空格间距
– 用 <pre> 包普通段落，结果字体变等宽、上下 margin 异常、无法和周围文字对齐
用 white-space: pre-wrap 批量控制最稳妥
这是动态内容场景的首选方案，兼顾保留空格/换行 + 自动折行，不撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 必须显式加在目标元素上，
<pre>标签只是它的快捷写法，但自带副作用 - 对
<td>、<div>、<p>都有效，但注意：<span>默认 inline，white-space仍起作用，无需额外设display - 别给整页或长列表加这个样式——超长无换行文本会强制拉宽容器，移动端尤其危险
- 后端返回的 JSON 字段如
"name": " Alice "，前端只需：el.style.whiteSpace = 'pre-wrap';el.textContent = data.name;（不用转义，不走innerHTML）
只适合小范围、静态、语义明确的空格
每个 渲染为一个不可断行、不可折叠的空格，适合单位前、词间微调、表格内对齐等固定需求。
实操要点：
– 写法必须是 （& 是 & 的实体，漏掉分号就失效）
– 要三个空格？写 ，不是 （中间普通空格仍会被压缩）
– 在 JSX 或 Vue 模板中，需写成 {' '} 或 v-html="' '"，否则被当纯文本
– 别用它做布局对齐：响应式下字体缩放会导致宽度漂移，屏幕阅读器可能读出“不间断空格”，影响可访问性
真正容易被忽略的边界情况
white-space: pre-wrap 会保留所有换行符，如果后端返回的字符串末尾带 \n，页面上就会多出一行空白； 在 <button> 或 <input> 的 value 属性里完全无效——属性值里的空格永远按 HTML 规则解析，不能靠实体控制；还有，border-collapse: collapse 下表格单元格的 padding 和 border 可能掩盖空格视觉间距，调试时得临时加 border: 1px solid red 才看得清真实效果。
