HTML默认将多个空格合并为一个，是规范规定的解析行为，旨在提升源码排版自由度；推荐用white-space: pre-wrap精确控制空白显示。
HTML默认为什么把多个空格合并成一个
因为HTML解析器遵循规范，会将任意长度的空白字符序列（空格、制表符、换行）压缩为单个空格，再渲染。这不是bug，是设计行为——它让HTML源码排版更自由，不影响显示效果。
用 手动替换空格但不推荐
虽然可以把每个空格替换成 （非断行空格），比如Hello World显示为“Hello World”，但问题明显：
- 可读性差，源码里全是
- 无法动态生成，JS拼接字符串时容易漏或错数
- 复制文本时
用CSS的white-space属性控制空白处理
这是最常用也最可控的方式。关键取值有三个：
-
white-space: pre;：保留空格和换行，但不自动换行（文字超出容器也不折行） -
white-space: pre-wrap;：保留空格和换行，且允许自动换行（推荐日常使用） -
white-space: pre-line;：合并连续空格，但保留换行符（类似普通段落，只是换行生效）
例如：
<p style="white-space: pre-wrap;">Hello world</p>会原样显示4个空格。
立即学习“前端免费学习笔记（深入）”；
服务端/JS预处理时用String.replace()加 要谨慎
如果必须用 且内容来自变量，别直接str.replace(/ /g, ' ')——这会把所有空格（包括首尾、段落间）都替换，破坏排版逻辑。
- 只替换“连续空格中的第2个及以后”：
str.replace(/ {2,}/g, match => ' '.repeat(match.length)) - 更稳妥的做法是先用
white-space: pre-wrap，仅在需要精确控制语义（如代码片段、ASCII艺术）时才上 - 注意：服务端输出含
Content-Type声明了charset=utf-8，否则可能乱码
真正难的不是怎么实现，而是判断该不该破除HTML默认空白规则——多数时候，用pre-wrap就够了；只有当空格承载语义（比如缩进结构、对齐表格）时，才值得引入额外复杂度。
