HTML中多个空格被合并时，可用 替代空格或设置white-space:pre-wrap样式；前者兼容性好，后者适合动态内容且允许折行，避免使用<pre>导致布局错乱。
HTML中里多个空格被合并怎么办
浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，所以直接在 <span>a b</span> 里写四个空格，实际只显示一个。
用 替代普通空格
最直接、兼容性最好的办法：把每个需要保留的空格换成 HTML 实体 。它代表“不换行空格”，不会被浏览器合并。
例如：<span>a b</span> 就能显示 a 后跟四个空格再接 b。
注意： 是实体，不是字符串，必须写成 （不能漏掉开头的 &），否则会原样显示文字 。
立即学习“前端免费学习笔记（深入）”；
用 CSS 的 white-space 属性控制
如果空格数量不固定，或要批量处理，推荐用 CSS。给 <span> 加样式：white-space: pre; 或 white-space: pre-wrap;。
white-space: pre; 行为类似 <pre> 标签：保留所有空白和换行，但不自动换行；white-space: pre-wrap; 保留空白，同时允许长文本折行，更实用。
示例：<span style="white-space: pre-wrap;">a b</span> —— 四个空格原样呈现，且内容超出容器时仍可折行。
注意：不要用 white-space: nowrap;，它只禁止换行，不保留多余空格。
为什么不用 <pre> 包裹 <span>
<pre> 确实保留空格，但它自带 display: block 和上下外边距，会破坏内联流式布局。强行套在 <span> 外（如 <pre><span>...</span></pre>）反而让行内元素变块级，容易撑开行高或错位。
真正需要保留空格又保持内联语义时，优先选 或 white-space，而不是靠标签嵌套硬拗。
复杂点在于：动态内容（比如 JS 拼接字符串）里混用 容易出编码问题；而 CSS 方案依赖样式生效，服务端渲染或 SSR 场景下若样式未及时加载，可能闪动回退到压缩空格状态。
