HTML 实体编码：  和普通空格有什么区别？

  是 U+00A0「不换行空格」，普通空格是 U+0020；两者在屏幕上的样子几乎一样，真正的区别只有两条——  不参与 HTML 的空白折叠，也不允许在此断行。

TL;DR： 连续空格用 white-space: pre-wrap；缩进用 text-indent；防断行用 white-space: nowrap 包裹；前后端清洗都要处理 U+00A0；别拿   做排版。

  和普通空格到底差在哪？

结论：差异只有码位和排版行为两项，宽度和外观在多数正文字体里完全一致，所以把   当"更宽的空格"用是无效的。

HTML 文本节点里的空格、Tab、换行，在默认的 white-space: normal 下会被折叠成一个空格，行首行尾的空白直接删掉——这就是"空白折叠"。参与折叠的是 TAB、LF、FF、CR、SPACE 这几个 ASCII 空白字符；U+00A0 不在其中，Unicode 把它归为 GL（不可断行）类，所以写几个就渲染几个，而且不会在它所在的位置换行。

读表结论：只有"折叠"和"断行"两项是真实行为差异，宽度不能依赖——换字体就可能变。

为什么我敲了 10 个空格，浏览器只显示 1 个？

结论：这是 CSS white-space 规范定义的空白折叠，不是浏览器 bug；要保留连续空格必须显式改 white-space。

折叠规则一共三条：连续空白合并为一个空格；行首空白删除；行尾空白删除。想保留就改 white-space：

• white-space: pre-wrap：保留空格和换行，同时仍会自动换行，最常用。
• white-space: pre：保留但不自动换行，容易撑破容器，慎用。
• 只保留空格、不保留换行，没有单独的开关。数据里本来就带换行时，pre-wrap 会把换行也放出来。

所以"显示多个空格"这件事的正解是 CSS，不是往 HTML 里塞  。

用   防换行，有更好的写法吗？

结论：有，用 white-space: nowrap 包住需要粘在一起的内容，比在中间插   更好维护，也不会污染文本内容。

典型场景是"数值 + 单位"不希望被拆到两行：3.5 mm、¥ 100、第 1 章。用   能实现，但字符会进入文本内容——复制、分词、读屏都会带上 U+00A0。改成 <span style="white-space: nowrap">3.5 mm</span>，换行策略由样式控制，内容保持干净。

注意 white-space 是继承属性，套在父容器上会作用到整块内容，所以尽量包在一个 inline 的 span 上，把作用域收窄。

Vue 与 React 都要提供最短可用版本：

• Vue 模板：<span class="nowrap">{{ size }} mm</span>。Vue 3 的模板编译器会解码命名实体，模板里写   能得到 U+00A0，但这仍然是把排版写进了内容。
• React/JSX：<span className="nowrap">{size} mm</span>。JSX 的文本子节点会解码实体，JS 表达式字符串不会——<span>{'3.5&nbsp;mm'}</span> 会原样输出   这五个字符。表达式里要写 {'3.5\u00a0mm'}。

  会在哪些地方咬人？

结论：主要集中在数据清洗、复制粘贴、SEO 分词、URL 编码四类场景，而且都是"看起来正常、实际匹配不上"的隐蔽故障。

数据清洗是重灾区。JavaScript 的 trim() 会去掉 U+00A0（ES2015 起 WhiteSpace 就包含 <NBSP>）；Python 3 的 str.strip() 默认也去 Unicode 空白；但 Java 的 String.trim() 只处理码位 ≤ U+0020 的字符，Character.isWhitespace('\u00A0') 返回的是 false。结果是"看起来是空的"字段通过了非空校验，或者长度校验莫名其妙多一位。Java 上必须用 String.strip()（Java 11+）或先 replace("\u00a0", " ")。

复制粘贴：从网页复制文本时会带出 U+00A0，粘进 IDE 是不可见的脏字符，字符串字面量里混进去往往要到运行时报错才发现，很多 lint 规则会直接报 "Irregular whitespace not allowed"。

SEO 与分词：Vue 3 抽成纯文本后是 Vue\xa03，它不是一个普通空格，部分分词器不会把它当分隔符。规范层它就是个字符，实现层各家分词器处理不一致，稳妥做法是正文里正常打空格，不要用   连接关键词。

URL：U+00A0 在 UTF-8 下编码为 %C2%A0，普通空格是 %20（查询串里可以是 +）。把带 NBSP 的值拼进 URL，后端存的是 %20，表现就是"参数明明传了，就是查不到"。

读表结论：只有"内容本身就需要一个 U+00A0"时才写  ，其余全是排版问题，交给 CSS。

浏览器支持情况

读表结论：  解析、pre-wrap、trim() 三家行为一致，可直接用；break-spaces 标记为 ⚠️，需上线前核实目标浏览器版本。

核查日期：本文撰写当日。HTML 实体解析与空白折叠属 HTML/CSS 规范层，各家行为一致，具体起始版本号以 MDN 为准，本文不臆测版本。

常见误区

❌ 用   当"更宽的空格"做对齐 → ✅ 用 padding、text-align 或 Grid 布局。为什么错：NBSP 在正文字体里和普通空格同宽，它只是不折叠，做不出 TAB 效果，换字体还会漂移。

❌ 段首写两个   做缩进 → ✅ text-indent: 2em。为什么错：缩进字符进入文本内容，会被复制、被分词、被读屏软件念出来，宽度还受字体影响。

❌ 后端只调 trim() 就做非空校验 → ✅ 先 replace("\u00a0", " ") 再 strip()。为什么错：Java 的 String.trim() 不去 U+00A0，Character.isWhitespace('\u00A0') 返回 false，全 NBSP 的字段会被判为非空。

❌ 在 JSX 的字符串表达式里写   → ✅ 写 {'3.5\u00a0mm'}。为什么错：JSX 只解码文本子节点里的实体，字符串字面量会被原样输出。

❌ 用   撑开空表格单元格 → ✅ empty-cells: show 配合固定列宽。为什么错：NBSP 会跟着复制和导出，Excel 里多出空白列，还会干扰表格数据的程序化解析。

❌ 把带 NBSP 的值直接拼进 URL → ✅ 拼接前统一归一化为普通空格。为什么错：NBSP 编码成 %C2%A0，与后端存的 %20 对不上，表现为"参数传了但查不到"。

自查清单

• [ ] 正文中每个   都属于"内容需要不换行"，而不是排版需要
• [ ] 所有   都带分号，没有写成 &nbsp（分号可省略的容错只在后接非字母数字时生效）
• [ ] 连续空格用 white-space: pre-wrap 实现，没有连写多个  
• [ ] 缩进用 text-indent，没有用  
• [ ] white-space: nowrap 只加在 inline 元素上，没有污染父容器
• [ ] JSX 里没有在任何字符串字面量中写  
• [ ] 前端提交表单前把 U+00A0 归一化为普通空格
• [ ] 后端非空/长度校验之前先替换 U+00A0（Java 项目尤其要确认用的是 strip()）
• [ ] 用 [\u00a0\u200b\ufeff] 全局搜索过源码，没有混入不可见字符
• [ ] 空单元格靠 CSS 撑开，没有塞  
• [ ] URL 参数拼接前做过 NBSP 归一化
• [ ] 页面关键词之间没有用   连接

FAQ

Q：  能写成   吗？
A：规范层命名字符引用区分大小写，  是通行写法；实现层部分模板引擎和压缩工具只认小写。统一用小写最稳。

Q：在 white-space: pre 里，  和普通空格还有区别吗？
A：视觉上几乎没有。pre 下普通空格也不再折叠，剩下唯一的差异是   依然禁止断行。

Q： 、  和   有什么区别？
A：宽度基准不同。