不是连续空格的正确解法，因其将空格固化为html实体，破坏语义、无法响应white-space控制；pre禁用自动换行易撑破布局，pre-wrap保留空白且允许折行，更符合日常需求。
为什么 不是连续空格的正确解法
直接用多个 拼接看似能保留空格，但本质是用 HTML 实体替代空格，破坏了文本语义，且无法响应 CSS 的 white-space 控制，后期调整排版或做可访问性适配时会出问题。更关键的是：它把空格“固化”进 HTML 结构，而不是让浏览器按规则渲染已有空格。
white-space: pre 和 pre-wrap 的实际差异
两者都能保留空格和换行，但行为关键不同：
-
pre：完全禁用自动换行，哪怕内容超出容器宽度，也不会折行，容易撑破布局 -
pre-wrap：保留所有空白符（包括空格、制表符、换行），同时允许在必要时折行，更符合日常需求 - 若需保留空格但忽略原始换行，可用
white-space: pre-line—— 它会合并连续空格为单个空格，但保留换行符的折行效果
后端输出带空格的 HTML 时要注意什么
如果服务端模板（如 Jinja2、EJS）或 API 返回含多空格的字符串，浏览器默认会塌缩。必须确保最终渲染的 <div> 或 <code><span></span> 元素带有 white-space 样式：
<div style="white-space: pre-wrap;">hello world</div>
注意：pre-wrap 对 <pre class="brush:php;toolbar:false;"></pre> 标签默认生效，但对普通块级/内联元素需显式设置；另外，若该元素设置了 text-align: justify，可能干扰空格渲染，应避免混用。
JavaScript 动态插入含空格文本时的坑
用 textContent 插入字符串时，空格会被正常保留，但若用 innerHTML，且字符串里没做转义，某些空格可能被解析器忽略（尤其开头/结尾空格）：
- ✅ 推荐：
el.textContent = "a b";—— 空格原样呈现 - ⚠️ 风险：
el.innerHTML = "a b";—— 多空格仍可能被塌缩，除非父元素已设white-space - ? 补救：
el.innerHTML = "a b";可行但不推荐，语义失真且难维护
最稳妥的方式是统一设置 CSS 并使用 textContent，避免在 JS 层处理空格转义逻辑。
