HTML默认压缩连续空格是规范行为，非bug；可用 实体或white-space CSS属性（如pre-wrap）保留空格，<pre>标签仅适用于预格式化文本。
为什么普通空格在HTML里不显示
HTML解析器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是规范行为，不是bug。所以写<p>hello world</p>或直接敲多个空格，浏览器都只渲染一个。
是最直接的解决方案
用 （non-breaking space）替换普通空格，它不会被折叠，也不会换行。适合少量、语义上需要“不可断开”的空格场景，比如单位前（100 px）、人名中间（John Doe）。
注意点：
-
- 大量使用会让HTML源码臃肿，且不利于内容维护和国际化
- 它不响应CSS的
white-space控制，一旦插入就固定占位
CSS white-space 更灵活，适合文本块
对整段文字或容器启用white-space: pre或pre-wrap，就能保留所有原始空格与换行。比堆 更干净，也支持动态内容。
立即学习“前端免费学习笔记（深入）”；
常用值对比：
-
pre：完全按源码空格/换行渲染，不自动折行 -
pre-wrap：保留空格和换行，但允许长单词内折行（推荐多数场景） -
pre-line：合并连续空格，但保留换行 —— 不满足“连续空格”需求，慎选
示例：<div style="white-space: pre-wrap">hello world</div> 会显示4个空格。
用<pre>标签要小心语义和样式
<pre>默认带white-space: pre和等宽字体，适合代码、日志这类纯格式化文本。但直接套用会导致字体、行高、边距异常。
安全做法：
- 仅用于真正需要预格式化的场景（如
<pre><code>...） - 若只是想保留空格，优先用
white-space+ 普通标签（如<div>），再重置字体：font-family: inherit - 避免嵌套
<pre>在<p>里，HTML规范不允许
复杂点往往不在“怎么让空格显示”，而在于“要不要让这段内容承担预格式化的语义”。选 还是white-space，本质是在权衡控制粒度和维护成本。
