HTML中连续空格默认被合并为一个，属规范行为；需保留空格时推荐用CSS的white-space: pre-wrap，兼顾保留空白与自动换行。
HTML中普通空格会被自动合并
浏览器默认会把连续的多个空格、换行或制表符压缩成一个空格，所以直接敲空格键写 或者用空格键打多个空格，页面上只显示一个。
这是HTML规范行为，不是bug，也不需要“修复”——它本就是设计如此。
- 想保留多个空格，必须用显式方式告诉浏览器“这里要原样渲染”
-
- 用
<pre>标签包裹内容，能保留所有空白和换行，但会改变默认字体和行高，适合代码块类场景 - CSS 的
white-space属性更灵活，推荐用于普通文本容器
用 white-space CSS 控制空格渲染
在包裹文字的标签（比如 <div>、<p>、<span>）上加样式，是最干净的方案。
关键取值：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre;—— 保留空格和换行，但不自动换行（文字超出容器也不会折行） -
white-space: pre-wrap;—— 推荐！保留空格和换行，同时允许正常折行 -
white-space: pre-line;—— 合并多余空格，但保留换行符（类似普通段落，只是换行有效）
示例：
<p style="white-space: pre-wrap;">Hello world </p>
里面四个空格、五个空格、甚至 都会按数量显示，且超长时仍会折行。
适合零星、语义化强调的空格
不是“多打空格”的替代品，而是用于防止单词被折行、或微调排版位置的语义化空格。
- 人名中间：
John Doe（避免姓和名被拆到两行） - 单位和数字之间：
100 px、5 kg - 版权符号后：
© 2024
别用它堆出“缩进效果”，比如 写十次——可读性差，维护困难，也违背CSS分离原则。
避免用 <pre> 包裹普通段落
<pre> 确实保留所有空格，但它自带 font-family: monospace 和 white-space: pre，还会禁用 margin collapse，容易破坏原有布局。
- 适合：
<pre><code>.../pre>这类代码展示 - 不适合：文章正文、按钮文字、表格单元格里只为了多几个空格就套一层
<pre> - 如果硬要用，至少重置样式：
<pre style="font-family: inherit; white-space: pre-wrap;">
真正需要控制空白的地方，优先选 white-space + 普通标签，而不是靠标签语义强行覆盖。
空格看似简单，但混用 、<pre> 和 CSS 容易让HTML变得不可预测——尤其在响应式或国际化场景下，空格宽度、换行逻辑、字体度量都可能变化。盯住需求：是要“视觉对齐”，还是“语义分隔”，还是“代码原样”，再选对应手段。
