HTML中连续空格会被浏览器自动合并为一个，需用 实现不换行空格或white-space CSS属性保留原始空白格式。
HTML里普通空格会被自动合并
浏览器默认把连续多个 或普通空格（ ）压缩成一个，所以直接敲空格键、复制多个空格、甚至用空格符粘贴，最终页面只显示一个。
这是 HTML 的渲染规则，不是 bug，也不需要“修复”，但得按它的逻辑来应对。
用 手动插入不合并的空格
是 HTML 实体，代表“不间断空格”（non-breaking space），浏览器不会把它和其他空格合并，也不会在行尾换行时拆开它。
- 想显示 3 个空格？写
- 适合少量、确定数量的空格，比如缩进标题、对齐表格内文字
- 注意：
white-space计算或光标位置 - 不要滥用：10 个
用 white-space CSS 控制整块区域的空格行为
当需要保留原始空格格式（比如代码片段、诗歌排版、日志输出），应该用 CSS 的 white-space 属性，而不是堆 。
立即学习“前端免费学习笔记（深入）”；
常见取值和效果：
-
white-space: pre;—— 像<pre>标签一样，保留空格、换行、制表符，但不自动换行 -
white-space: pre-wrap;—— 保留空格和换行，同时允许长行自动折行（最常用） -
white-space: pre-line;—— 合并连续空格，但保留换行符
示例：
<p style="white-space: pre-wrap;"> 这里有两个前导空格
这里有四个空格，还有换行</p>
避免用 <pre> 标签硬套非代码内容
<pre> 默认使用等宽字体、保留所有空白，适合代码或终端输出，但不适合正文段落。
- 如果只是想让一段普通文字保留空格，别直接包
<pre>，改用white-space: pre-wrap更可控 -
<pre>会影响字体、行高、内外边距，容易破坏整体排版一致性 - 移动端下
<pre>内容常因宽度溢出导致横向滚动，而pre-wrap能正常折行
真正要打多个空格，优先想清楚：是临时微调？还是语义上需要保留空白？前者用 ，后者用 CSS。混用或硬塞空格字符，后期改起来最头疼。
