浏览器默认折叠连续空格是HTML规范要求的空白折叠行为；需用 实体或white-space CSS属性实现多空格显示，前者适用于小范围语义间距，后者适合整段文本格式控制。
浏览器默认把连续空格压成一个，这不是 bug，是 HTML 规范强制要求的「空白折叠」行为；想让多个空格真正显示出来，必须绕过它——核心就两条路： 硬塞，或用 white-space CSS 属性接管解析逻辑。
为什么直接敲空格键没用
HTML 解析器在渲染前就把所有连续空白（空格、制表符、换行）合并为单个空格，这个过程发生在 DOM 构建阶段，和后续 CSS 无关。你在编辑器里写 hello world，最终页面上永远是 hello world。
常见错误现象：
- 写成
&nsbp;（漏掉&或拼错）→ 浏览器当普通文本显示，不解析 - 在 Vue/React 模板中用
v-html或dangerouslySetInnerHTML渲染含 - 用
用 实现可控空格
是唯一能保证“这里一定有一个可见、不可折叠、不可换行”的空格实体。适合小范围、语义明确的间距控制，比如单位前、标题词间。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 要三个空格？写
- 静态文本中数量控制在 1–4 个以内，超过建议换方案
- 避免嵌套使用，比如别写
- 在 React/Vue 中动态插入时，得用
innerHTML赋值；textContent会把
用 white-space CSS 批量控制格式
这是更现代、更灵活的方式，尤其适合整段文本保留原始空格+换行，比如代码块、日志、诗歌排版。
参数差异注意点：
-
white-space: pre：保留所有空白，不自动换行 → 长文本会溢出容器，慎用 -
white-space: pre-wrap：保留空白，且允许自动换行 → 日常最推荐，兼顾可读性与响应式 -
white-space: pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求
性能影响很小，但别滥用：给整个 <body> 或长列表加 white-space: pre，会导致文本无法折行，破坏响应式布局。
<pre> 标签不是“加空格专用”，而是 white-space: pre 的快捷写法
<pre> 本质是启用了 white-space: pre + 等宽字体 + 默认 margin。你完全可以用 <div style="white-space: pre;"> 达到同样效果，且不带字体副作用。
适用边界：
- 适合代码片段、日志输出、ASCII 图形等真正需要「原样复刻」的场景
- 如果只是想让普通段落多几个空格，强行套
<pre>会引入样式干扰，得额外重置font-family、margin等 - 它不能嵌套在
<p>里——HTML 规范禁止块级标签嵌套在<p>中
真正容易被忽略的是：空格是否需要「语义保真」。比如数字和单位之间用 （10 kg）是为了防止换行断裂，而展示一段缩进 JSON 就该用 white-space: pre-wrap ——方法选错，后期维护成本会指数级上升。
