浏览器默认压缩连续空格为一个，显示多个空格需用 、<pre>标签或white-space CSS属性；因HTML规范强制空白折叠，直接敲空格无效。
浏览器默认会把连续空格压缩成一个，想显示多个空格，必须绕过这个规则——没有“全局开关”，只有三种可靠路径：用 、用 <pre>、或用 white-space CSS 属性。
为什么直接敲空格键没用
HTML 规范定义了“空白折叠”（whitespace collapsing）：所有连续的空格、制表符、换行符，在渲染时都会被合并为单个空格。这不是 bug，是标准行为。哪怕你在 <p> 里写 hello<space><space><space>world，最终也只显示 hello world。
常见误判：
- 以为在代码里多敲几次空格键就能生效
- 把编辑器里的缩进当成页面上的可见空格
- 在属性值里用
class="foo bar"），但属性值中空白仍会被解析器忽略
用 实现可控空格数
这是最轻量、语义最明确的方式，适合少量、确定数量的空格，比如对齐字段、补位、中文排版中的标点悬挂控制。
立即学习“前端免费学习笔记（深入）”；
- 每个
- 要空两格？写
- 不推荐用于缩进段落——
text-indent或margin-left更合理 - 注意不要混用：
a b→ “a[空格]b”，中间只有一个空格
用 white-space: pre-wrap 批量保留格式
当你要显示一段含自然空格/缩进/换行的文本（如代码片段、诗歌、日志输出），CSS 方案更高效且可维护。
-
white-space: pre：保留所有空白和换行，但内容超宽不换行，容易溢出容器 -
white-space: pre-wrap：保留空白和换行，同时允许自动换行——日常首选 -
white-space: pre-line：合并连续空格，只保留换行——类似普通段落加手动回车 - 必须作用于块级元素（如
<div>、<p>），对内联元素（如<span>）设该属性可能改变布局流
用 <pre> 标签快速兜底
这是语义最清晰的方案：告诉浏览器“这段内容需要按源码格式渲染”。它本质等价于 white-space: pre + font-family: monospace 的组合。
- 写法简单：
<pre> hello world</pre>→ 空格和换行全保留 - 缺点是默认等宽字体，若需继承上下文字体，得额外加
font-family: inherit - 不建议嵌套在
<pre>里再用<div>或<p>——语义冲突，且部分浏览器对嵌套预格式化处理不一致 - 如果只是想保留空格、不需要保留换行，
<pre>就过度了，改用white-space: pre-wrap
真正容易被忽略的是场景匹配：用 做字段对齐没问题，但想让用户粘贴的一段带缩进的 JSON 正确显示？那必须上 white-space: pre-wrap 或 <pre>。选错方案不会报错，但后期维护时会发现空格忽隐忽现、换行错乱、响应式下溢出——问题根源往往就卡在这三者边界没划清。
