浏览器默认合并连续空格为一个，是HTML规范行为；需用 实体或white-space CSS属性（如pre-wrap）来保留多个空格，标签仅适用于预格式化文本场景。

连续空格在 HTML 中默认不显示，不是你写错了，是浏览器按规范把它们全合并成一个了——想让它原样出现，得绕过空白折叠规则，核心就两条路：  硬塞，或用 white-space 控制解析方式。

为什么直接敲空格键没用

HTML 解析器会在渲染前把所有连续空白字符（空格、制表符、换行）压缩为单个空格，并忽略首尾空白。哪怕你在编辑器里写了 helloworld，最终页面上就是 hello world。这不是 bug，是规范行为。

常见错误现象：

• 写成 &nbsp（漏掉分号）→ 浏览器不识别，当普通文本显示
• 在 React/Vue 模板里用 v-html 或 dangerouslySetInnerHTML 渲染含   的字符串，但没转义 → 可能被二次解析或触发 XSS
• 用   对齐中英文混排文字 → 全角/半角宽度不一致，视觉错位

用   实现可控单空格

  是唯一能保证“这里一定有一个可见、不可折行空格”的实体。它不被合并，也不在行尾断开，适合小范围语义化间距控制。

实操建议：

• 要三个空格？必须写三遍：   ，不能写成      （中间的普通空格仍会被折叠）
• 静态文本中数量控制在 1–4 个以内；超过建议换方案，比如用 padding-left 或 text-indent
• 别嵌套使用，例如不要写  ——那是把   当纯文本输出，不会渲染为空格
• 动态插入时，用 innerHTML 赋值；若用 textContent，  会被当字符串原样显示

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

这是更现代、更可持续的做法，尤其适合整段文本保留格式：代码块、日志、诗歌、缩进 JSON 等。

参数差异注意点：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• pre：保留所有空白和换行，但不自动换行 → 长文本会横向溢出容器
• pre-wrap：保留空白和换行，且允许自动换行 → 大多数场景最安全
• pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求

性能影响很小，但别滥用：给整个 或长列表加 white-space: pre，会导致文本无法折行，破坏响应式布局。

标签不是万能占位符

本质是 white-space: pre 的快捷写法，自带等宽字体和默认外边距。它适合真正需要「原样复刻」的场景，比如代码片段、ASCII 图形、带缩进的 YAML。

容易踩的坑：

• 默认 font-family: monospace → 中文显示发虚、字号偏小，需手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
• 内容含 、> 等符号却没做 HTML 转义 → 直接被解析为标签，结构错乱
• 包裹用户输入或 API 返回的字符串，但忘了过滤或转义 → XSS 风险
• 不能嵌套在
  里 —— HTML 规范禁止块级标签嵌套在
  中

真正容易被忽略的是上下文：静态 HTML 里用   最稳；动态内容优先用 div + white-space: pre-wrap + textContent 设置；而

不是样式补丁，用错地方反而增加维护成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！