HTML中连续空格会塌陷是因为浏览器默认执行空白符折叠，将多个空格、制表符、换行符压缩为一个空格；可通过CSS white-space属性（如pre、pre-wrap、pre-line）控制空白显示，或使用<pre>/<textarea>标签天然支持连续空格。
HTML里连续空格为什么会塌陷
浏览器默认会把多个连续的普通空格、制表符、换行符全部压缩成一个空格，这是HTML规范定义的“空白符折叠”行为。所以直接敲 或者写三个空格，渲染出来还是一个视觉空格。
用 手动填充不现实？试试 CSS white-space
如果要批量显示连续空格（比如对齐代码片段、模拟终端输出），最稳妥的方式是用CSS控制容器的空白处理逻辑：
-
white-space: pre：保留所有空白符和换行，但不自动换行 -
white-space: pre-wrap：保留空白符，同时允许换行（推荐日常使用） -
white-space: pre-line：合并连续空格，但保留换行
示例：
<div style="white-space: pre-wrap">字段A： 值1<br>字段B： 值2</div>这样既避免堆砌
，又能让空格真正“可见且可控”。
JavaScript动态插入连续空格容易踩的坑
用JS拼接字符串时，" ".repeat(4) 生成的仍是普通空格，在innerHTML中照样被折叠。必须配合CSS或转义：
立即学习“前端免费学习笔记（深入）”；
- 方案一：用
" ".repeat(4).replace(/ /g, " ") - 方案二：设置父元素
white-space: pre，再用textContent插入纯空格字符串（更语义清晰） - 注意：不要在
innerHTML里混用
textarea和pre标签天然支持连续空格
如果只是展示用途，<textarea readonly> 或 <pre> 是最省事的选择——它们默认启用 white-space: pre，输入多少空格就显示多少空格，无需额外样式。
但要注意：<pre> 会强制等宽字体，<textarea> 默认带边框和滚动条，需要 style="border:none; resize:none; overflow:hidden;" 微调外观。
