HTML规范强制空白折叠，连续空格被压缩为一个；需用 、white-space属性或<pre>标签保留原样空格。
浏览器把连续空格压缩成一个，不是 bug，是 HTML 规范强制要求的「空白折叠」行为；想让多个空格原样显示，必须用 、white-space CSS 属性或 <pre> 标签绕过它。
为什么直接敲空格键没用
HTML 解析器在渲染前就把所有连续空白字符（空格、制表符、换行）合并为单个空格，并丢弃首尾空白。哪怕你在编辑器里写了 hello world，最终页面上就是 hello world。这个过程发生在解析阶段，和字体、margin 无关。
常见错误现象：
- 写
 （漏掉分号）→ 浏览器不识别，当纯文本显示 - 在 Vue/React 模板中用
v-html或dangerouslySetInnerHTML插入未转义的 - 用
用 控制单个不可折行空格
是唯一能保证“这里一定有一个可见空格”的实体，每个渲染为一个不可折叠、不可换行的空格。适合小范围、语义明确的间距控制。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 要三个空格？写
- 静态文本中建议控制在 1–4 个以内；超过请换方案
- 在 React/Vue 中动态插入时，必须用
innerHTML赋值；textContent会把 - JS 字符串里写
'a b'是错的，得写'a b'（&必须转义为&），或用String.fromCharCode(160)生成\u00A0
用 white-space 批量控制整块文本
这是更现代、更灵活的方式，尤其适合代码块、日志、诗歌等需保留原始缩进和换行的场景。
关键参数差异：
-
white-space: pre：保留所有空格和换行，但不自动换行 → 长文本会溢出容器 -
white-space: pre-wrap：保留空格和换行，且允许自动换行 → 日常最推荐 -
white-space: pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求
容易踩的坑：
- 给
<body>或长列表加pre类值 → 文本无法折行，破坏响应式布局 -
<pre>默认用等宽字体 → 中文发虚、字号偏小，需手动覆盖font-family - 内容含
<>等符号却未转义 → 直接被解析为标签，结构错乱
用 <pre> 标签快速包裹可信内容
<pre> 本质是 white-space: pre 的快捷写法，还附带等宽字体和默认外边距。它不是“专门加空格”的标签，而是为预格式化文本设计的。
适用场景：
- 纯展示、内容可信（如自己写的示例代码）
- 后端返回带缩进的 JSON/YAML 字符串，前端要原样呈现
不适用场景：
- 内容来自用户输入或外部 API → 优先用
<div style="white-space: pre-wrap">+textContent设值，避免 XSS - 仅为了“让两段文字隔开一点” → 应该用
margin或padding，而不是堆<pre>
复杂点往往藏在细节里：空格的视觉宽度取决于当前字体和字号， 在 system-ui 下可能比 monospace 下窄；移动端小字号下多个 容易糊成一片；屏幕阅读器会把它读作“空格”，过多会影响可访问性。
