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