浏览器默认在HTML解析阶段将连续空格压缩为单个空格，属规范行为；需用 实体或white-space:pre-wrap等CSS属性才能显示多个空格。

浏览器根本不“识别”连续空格——它在 HTML 解析阶段就直接把它们合并掉了。这不是识别失败，而是规范行为：所有连续的空白字符（空格、制表符、换行）一律压缩为单个空格。想让多个空格可见，必须绕过这个折叠过程。

为什么   能显示多个空格

因为   不是普通空格，而是 Unicode U+00A0「不换行空格」，属于独立字符，不会被空白折叠规则处理。每个   都会被渲染为一个真实、不可断行、不可合并的空白单位。

• 写三个空格？必须写成    ，不能写      （中间的普通空格仍会被折叠）
• 在 React/Vue 中动态插入时，得用 innerHTML 或 v-html，用 textContent 会原样输出字符串  ，不解析
• 别在属性值里依赖它，比如 title="a  b" → 大部分浏览器仍按 normal 模式处理属性值，  可能无效

white-space: pre-wrap 是最实用的批量方案

它不改内容，只改浏览器对空白的解释方式：保留源码里的所有空格和换行，并允许自动折行。适合用户输入、日志、诗歌等需保留原始格式又得响应式的场景。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 对比 pre：pre-wrap 不强制等宽字体，也不导致长行溢出容器
• 必须设在文本容器上，比如 <p style="white-space: pre-wrap"> a b</p>，而不是只给子元素加
• 如果父容器有 overflow: hidden 或固定宽高但没设 word-break，超长空格串仍会被截断或撑破布局

<pre> 标签不是“加空格工具”，而是语义开关

<pre> 的本质是启用 white-space: pre + font-family: monospace，语义上表示“这段文本需要像素级保留原始格式”。它不是为普通段落补空格设计的。

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

• 用它展示代码、ASCII 图、缩进明显的 YAML/JSON 没问题；但用来给“姓名：张三”前面加两个空格，就得额外重置字体、margin、line-height
• 不能嵌套在 <p> 里——HTML 规范禁止块级标签出现在 <p> 内部，浏览器会自动闭合 <p>
• 内容来自 API 或用户输入时，务必先做 HTML 转义（如把 < 变成 ），否则可能被解析成标签，引发结构错乱甚至 XSS

真正容易被忽略的是上下文：静态 HTML 里写   最稳；动态内容优先用 white-space: pre-wrap + textContent；而 <pre> 一旦脱离「预格式化文本」语义，就会变成样式和维护负担。