浏览器忽略连续空格是HTML规范规定的空白折叠行为，非bug；必须用、white-space:pre-wrap或<pre>标签解决，其中最直接兼容，white-space:pre-wrap最推荐用于响应式场景。

浏览器忽略连续空格不是 bug，是 HTML 规范强制要求的「空白折叠」行为；必须用  、white-space CSS 属性或 <pre> 标签绕过，默认方案根本不管用。

用   实体插入不可折叠空格

这是最直接、兼容性最好的方式，每个   渲染为一个独立、不可换行、不被合并的空格字符。

• 写三个空格？必须写三遍：   ，不能写成      （中间普通空格仍会被折叠）
• 在 React/Vue 中动态插入时，得用 innerHTML 或 v-html 渲染，textContent 会把   当纯文本显示，不解析
• 别在整段文字里堆几十个   做缩进——语义错误、HTML 体积膨胀、屏幕阅读器体验差
• 中英文混排时宽度不一致：同一字体下，  在中文环境常比英文窄，对齐不可靠

用 white-space: pre-wrap 批量保留原始空格

这是现代前端最推荐的通用解法，尤其适合用户输入、日志、诗歌等需保留格式但又得响应式的场景。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• white-space: pre-wrap 会原样保留源码中的空格、制表符、换行，并允许自动换行——比 pre 更安全
• 写法示例：<div style="white-space: pre-wrap;">用户名: 张三</div>，其中四个空格会全部显示
• 注意父容器限制：如果外层有 overflow: hidden 或 text-overflow: ellipsis，可能截断内容，需加 word-break: break-word
• iOS Safari 对长无空格字符串（如 base64）仍可能不折行，此时要额外加 word-break: break-all

为什么不用 <pre> 标签随便套

<pre> 不是“加空格专用标签”，它是语义化标签，表示「预格式化文本」，自带副作用。

立即学习“前端免费学习笔记（深入）”；

• 默认启用 white-space: pre + 等宽字体 + 上下 margin，强行套在普通段落里会破坏样式一致性
• 不能嵌套在 <p> 里——HTML 规范禁止块级元素出现在 <p> 内部，浏览器会自动闭合 <p>
• 真需要等宽效果（比如代码块），优先用 <pre><code> 组合；仅为了多几个空格，用 div + white-space: pre-wrap 更干净
• 后端返回带缩进的 JSON/YAML 字符串？直接 <pre> 是合理选择；但 CMS 输出的普通富文本，就该用 CSS 控制

真正难的从来不是让空格显示出来，而是判断该用语义化布局（padding、flex）还是格式控制（white-space）——多数时候，堆空格只是结构没理清的临时补丁。