HTML中空格“消失”是因浏览器默认合并连续空白字符，属white-space: normal规范行为；解决需分层处理：模板层用 等实体或pre-wrap CSS，避免被转义或压缩。
HTML 中的空格为什么会“消失”
浏览器默认会把 HTML 文本中的连续空白字符（空格、换行、制表符）合并成一个空格，且忽略首尾空白。这不是 bug，是 HTML 规范定义的 white-space 默认行为（white-space: normal）。所以直接写 或敲多个空格，最终渲染效果往往还是一个空格。
和 、 的区别
它们都是 HTML 实体，但语义和宽度不同：
-
-
-
注意：这些实体在模板引擎中若被转义或过滤（如 Vue 的 {{ }} 默认 HTML 转义），会原样输出为文本而非渲染为空格。
模板引擎里空格输出失效的常见原因
不是 HTML 渲染问题，而是模板层提前“吃掉”了空格：
立即学习“前端免费学习笔记（深入）”；
- Vue / React JSX 中，JSX 文本节点自动 trim 首尾空格 + 合并中间空白，写
{" hello "}等价于{"hello"} - Nunjucks / EJS 等服务端模板，默认会压缩/忽略模板中的空白（尤其在标签之间），比如
- 如果变量值本身含空格（如
name = "a b"），但模板用了{{ name | safe }}以外的方式输出，可能被转义成a b而非真实空格
解决办法通常是显式控制：用 替代普通空格，或用 white-space: pre-wrap CSS 保留原始空白。
安全又可控的空格输出方案
别依赖敲空格或换行，用明确、可预测的方式：
- 需要固定宽度空格 → 用
- 需要保留一段文本内的所有空白（含缩进和多空格）→ 把内容包在
或加 CSS：style="white-space: pre-wrap;" - 在 Vue 模板中插入空格 → 写成
- 在 React 中保留空格 → 使用
{"\u00A0"}（JS Unicode 不换行空格）或
这里有 四个空格 和换行
真正容易被忽略的是：模板引擎的“空白处理”和浏览器的“空白合并”是两层机制，得分别对付。只改 CSS 解不了模板里被删掉的空格，只加实体又可能被模板转义——得看清楚空格是在哪一层丢的。
