浏览器默认压缩连续空格、制表符、换行符为一个空格，是HTML规范强制行为；需用 实体或white-space: pre-wrap等CSS属性显式保留，<pre>仅适用于语义明确的预格式化内容。
浏览器默认把连续空格、制表符、换行全压缩成一个空格，这不是 bug，是 HTML 规范强制要求的行为；想让多个空格可见，必须显式干预——要么用 硬塞，要么用 white-space 控制解析逻辑，<pre> 只是前者的一种快捷但带副作用的写法。
为什么直接敲空格键没用
HTML 解析器在构建 DOM 前就完成了「空白折叠」：所有连续空白字符（空格、\t、\n、\r）被统一替换成单个 U+0020 空格，再丢给渲染引擎。你写 This<space><space><space>is，最终 DOM 文本节点里只剩一个空格。
- 这个过程发生在解析阶段，和 CSS
margin、font无关 -
- 全角空格（U+3000）虽能显示多个，但语义错乱、中文字体下宽度不稳定，不推荐
什么时候该用 ，什么时候不该用
适合语义明确、数量可控的单点间距，比如单位前、缩写后防断行；但它不是排版工具，堆十个会毁掉可读性和可访问性。
- 正确场景：
<p>文件大小：12.5 MB</p>（防止数字和单位被折到两行） - 错误场景：用
text-align或flex - Vue/React 动态插入时，
textContent会把innerHTML或框架提供的安全插值（如 Vue 的v-html） - 别嵌套写
&必须写成&，否则解析失败
white-space: pre-wrap 是日常最稳的选择
比起一个个塞 ，用 CSS 批量控制更干净。其中 pre-wrap 在保留原始空格/换行的同时允许自动折行，兼顾语义、响应式和可维护性。
立即学习“前端免费学习笔记（深入）”；
-
pre：保留所有空白，但不换行 → 长文本直接溢出容器，慎用 -
pre-wrap：保留空白 + 允许换行 → 大多数富文本、日志、地址字段首选 -
pre-line：合并空格，只保留换行 → 类似普通段落，不解决“连续空格”需求 - 别给整页或长列表加
white-space: pre，会导致文本无法折行，破坏移动端体验
<pre> 不是“加空格”的标签，是预格式化语义容器
<pre> 本质只是 white-space: pre + font-family: monospace 的快捷写法，它表示「这段内容的格式本身就有意义」，比如代码、ASCII 图、机器生成的日志。
- 用在标题或按钮里？语义错误，影响 SEO 和屏幕阅读器理解
- 内容来自用户输入或 API？必须先做 HTML 转义（如
<→），否则可能被解析成标签甚至触发 XSS - 要取消等宽字体？得显式重置：
pre { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } - 想保留格式又不用等宽字体？直接用
<div style="white-space: pre-wrap;">更轻量
真正容易被忽略的是上下文：静态文案里 最直觉；动态内容优先走 white-space: pre-wrap + textContent 安全设值；而 <pre> 一旦用错语义，后续加样式补救的成本远高于一开始选对方案。
