HTML默认合并连续空白字符是规范行为，可用white-space属性控制：pre保留所有空白不换行，pre-wrap保留空白且允许换行（推荐），pre-line将换行转空格；禁用空格对齐，应优先使用CSS布局方案。
HTML中连续空格被合并的默认行为
浏览器默认会把多个连续的 、普通空格、制表符或换行符压缩成单个空格，这是HTML规范定义的“空白字符折叠”规则。你写 或敲了四个空格，最终只显示一个空格宽度——这不是bug，是预期行为。
用white-space CSS属性控制空白处理
最直接可控的方式是用CSS的white-space属性改变元素内空白的渲染逻辑。常见取值和适用场景如下：
需要保留空格+换行，且不自动换行：用white-space: pre; —— 类似<pre>标签效果，空格、缩进、换行全保留，超出容器也不折行
保留空格+换行，但允许折行：用white-space: pre-wrap; —— 推荐多数场景，既保持原始格式（比如用户输入的缩进），又不会撑破容器
立即学习“前端免费学习笔记（深入）”；
只保留空格、不保留换行，允许折行：用white-space: pre-line; —— 换行符转为空格，但连续空格仍保留（注意：实际中这个行为容易误判，不如pre-wrap直观）
示例：
<div style="white-space: pre-wrap;"> 这里有两个前导空格 还有两个空格在中间 </div>
不是万能解，慎用于布局对齐
用 硬塞空格看似简单，但问题明显：
- 语义错误：空格是内容，不是样式，滥用会干扰可访问性（屏幕阅读器可能读出“空格空格”）
- 维护困难：5个
- 响应式失效：固定数量空格在不同字体/缩放下宽度不一致，移动端易错乱
真正需要对齐时，优先用CSS的text-indent、padding-left、margin或Flex/Grid布局，而不是靠空格“凑位置”。
服务端或JS动态插入空格时的编码陷阱
如果后端返回含多个空格的文本（如JSON字段"name": " Alice"），前端直接innerHTML渲染仍会被折叠。此时不能只依赖HTML，必须配合CSS：
✅ 正确做法：给容器加white-space: pre-wrap;，再注入原文本
❌ 错误做法：后端把空格替换成 再传——既增加传输体积，又让数据失去原始格式语义（比如无法用.trim()正确处理）
另外注意：若用textContent设置内容， 会被当纯文本显示为字面量，不会转义成空格；必须用innerHTML或显式document.createTextNode(" ")。
复杂点在于，white-space只作用于块级或行内块元素；如果目标是<span>这类默认行内元素，得先加display: inline-block;或display: inline;（后者不影响流式布局，但white-space对纯inline元素也生效）。
