浏览器默认压缩连续空格为一个，是HTML规范的空白折叠行为；需用 、white-space:pre-wrap或<pre>标签显式保留多个空格。
浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范行为；要显示多个空格，必须显式干预——要么用 ，要么改 white-space，要么套 <pre>。
为什么直接敲多个空格没用
HTML 解析器会执行“空白折叠”（whitespace collapsing）：所有连续的空格、制表符、换行符都被视作单个空格处理，仅在行内上下文中渲染为一个可见空格。比如写 <p>hello<space><space><space>world</p>，最终只显示 hello world。
- 这个规则适用于所有普通文本节点，和是否用了 CSS 无关
-
<div>之间换行产生的空格也受此影响，但可能表现为 inline-block 元素间的 4px 间隙（字体大小相关） - 不是编码或字体问题，重装浏览器也没用
用 替换空格最简单直接
每个 是一个不可断开的空格实体，浏览器不会压缩它，适合小范围、确定数量的空格控制。
- 想显示 3 个空格？写
<p>hello world</p> - 注意：
- 不适合动态内容：JS 拼接时若用
'a' + ' '.repeat(3) + 'b'，得确保插入的是innerHTML，textContent会原样显示字符串，不解析实体
white-space: pre-wrap 是最灵活的 CSS 方案
给容器设 white-space: pre-wrap，就能保留源码里的所有空格和换行，同时允许自动换行——日常排版推荐这个值。
立即学习“前端免费学习笔记（深入）”；
-
pre：保留空格和换行，但不换行，超宽内容会溢出容器 -
pre-line：合并连续空格，只保留换行，效果接近普通段落 - 设了
pre-wrap后，<span>内的换行也会被保留，可能意外破坏内联布局，需检查子元素 display 类型 - 别对整个页面根元素设这个，会影响按钮文字、导航栏等依赖默认空白处理的组件
<pre> 标签适合代码或固定格式文本
<pre> 本质就是带 white-space: pre 的块级元素，还附带默认等宽字体和 margin，适合展示日志、JSON、缩进结构化文本。
- 写
<pre> hello world</pre>，空格和前面的缩进全保留 - 如果不需要等宽字体，得额外加
font-family: inherit覆盖默认样式 - 不要滥用：
<pre>是语义化标签，表示“预格式化文本”，用在普通段落里违反语义 - 响应式场景下，
<pre>容易横向溢出，建议配合overflow-x: auto
真正容易被忽略的是：空格问题常混在动态渲染流程里——比如后端返回带空格的字符串，前端用 textContent 插入，结果空格全失效；或者 Vue/React 中绑定文本时没意识到模板编译已压缩了源码空格。这时候光调 CSS 没用，得从前端插入方式或服务端输出格式源头处理。
