html规范定义连续空白字符合并为单个空格，需用white-space属性（如pre-wrap）或css间距控制；js中textcontent会压缩空格，应改用innerhtml或设置whitespace样式。
为什么多个空格在HTML里只显示一个
这是HTML规范定义的行为，不是浏览器bug。解析器会把连续的空白字符（空格、制表符、换行）合并成单个空格，再渲染出来。你在源码里敲10个空格或换4行，最终页面大概率只显示一个空格。
- 块级元素（如
<p></p>、<div>）内的缩进和换行全被忽略 <li>行内元素（如<code><span></span>）中连续空格也只留一个 -
- 用多个
margin、padding或letter-spacing -
white-space: pre-wrap：保留所有空格和换行，同时允许自动换行——日常展示用户输入、日志、地址字段首选 -
white-space: pre：保留空格和换行，但不换行（超宽会溢出），适合代码片段预览 -
white-space: pre-line：合并连续空格，但保留换行符（\n），类似普通段落+换行生效 - 别用
white-space: nowrap来“保空格”——它会吞掉中间空格，只防换行 -
element.textContent = 'a' + ' '.repeat(4) + 'b'→ 页面仍只显示一个空格，因为textContent不解析HTML，纯空格照常被压缩 -
element.innerHTML = 'a' + ' '.repeat(4) + 'b'→ 正确，但注意&要写成&（JS字符串里） - 更稳妥的做法：
element.style.whiteSpace = 'pre-wrap'; element.textContent = 'a b'; - 若需Unicode空格，用
'\u00A0'（即String.fromCharCode(160)），别手敲 - 用全角空格（中文输入法下的空格）→ 渲染依赖字体，移动端可能错位或截断
- 堆
<pre class="brush:php;toolbar:false;"></pre>标签 → 它自带等宽字体和white-space: pre，破坏常规排版流 - 靠删HTML源码换行来消除
inline-block间隙 → 可读性差，且一旦格式化工具介入就失效 - 在
<button></button>里依赖空格分隔图标和文字 → 若加了white-space: nowrap，空格会被吞，文字和图标粘连
用 white-space 精确控制空格行为
这是最可控、最推荐的方案，直接覆盖默认空白处理逻辑。不同取值对应不同场景：
示例：<div style="white-space: pre-wrap">姓名： 张三</div> 中的两个空格会被如实显示。
JavaScript动态插入空格时的坑
用JS操作DOM时，空格行为和写死在HTML里不一致，容易白忙活：
别踩这些常见雷区
有些做法看似能用，实则埋下兼容性或维护隐患：
真正需要“多个空格”的地方，90%以上其实是视觉对齐或缩进，该用CSS间距属性解决，而不是对抗HTML的空白折叠规则。
