HTML默认合并连续空格，可用white-space: pre-wrap保留原样并允许换行；或用实体、<pre>标签、Unicode空格等方法。
HTML默认会合并连续空格，怎么保留原样显示
浏览器渲染HTML时会把多个连续空格、换行、制表符全部压缩成一个空格——这是HTML规范行为，不是bug。想让 以外的空格序列原样呈现，必须绕过这个默认处理逻辑。
- 最直接的办法是用
-
<pre>标签能保留所有空白符，但它会强制等宽字体+禁用自动换行，语义和样式都可能错位 - 更可控的方式是用CSS的
white-space属性，它专为此类需求设计
用white-space: pre-wrap安全保留空格和换行
这是多数场景下的推荐方案：pre-wrap既保留空格与换行，又允许内容自动折行、继承父级字体样式，语义也符合普通段落或容器需求。
-
white-space: pre会保留空白但不折行，长空格串可能撑破容器 -
white-space: pre-line会合并空格但保留换行，无法解决“连续空格”问题 - 必须显式设置该CSS，内联样式写法：
<p style="white-space: pre-wrap;">这里 有 四个空格</p> - 若用在
<textarea>或<div contenteditable>里，同样生效，但需注意用户输入时的光标行为不受影响
服务端/JS动态处理空格时的常见坑
后端模板（如Jinja2、EJS）或前端JS拼接字符串时，容易忽略HTML解析阶段的空白处理，导致预期空格消失。
- 不要依赖字符串里写多个空格再直接
innerHTML = str——浏览器仍会压缩 - 避免用
str.replace(/ /g, ' ')，因为 - 正确做法是用
str.replace(/ /g, '\u00a0')（Unicode不间断空格），或用textContent配合white-spaceCSS - 若内容来自用户输入且含敏感HTML，别用
innerHTML插入
特殊场景：需要精确控制空格宽度怎么办
当设计要求“两个空格=1em”“四个空格=2ch”这类像素级对齐时，white-space不够用，得结合其他手段。
立即学习“前端免费学习笔记（深入）”；
-
<span style="display:inline-block;width:1ch;"></span>可替代单个空格，但大量使用影响DOM性能 - CSS
letter-spacing对空格无效，word-spacing只作用于单词间，都不适用 - 真正需要等宽对齐的文本（如代码对比、日志缩进），还是回到
<pre>+ 自定义font-family更可靠 - 注意
ch单位在不同字体下实际宽度可能浮动，测试时务必用目标字体验证
white-space: pre-wrap就能解决。剩下20%往往卡在没意识到：空格是否真该由HTML/CSS承载——有时把缩进逻辑移到数据层（比如用indentLevel字段控制margin-left），反而更清晰、更易维护。 
