HTML中空格“消失”是因浏览器默认压缩连续空白字符且忽略首尾空格，属规范行为；应优先用white-space: pre-wrap等CSS控制显示，而非依赖多空格字符串。
HTML 中的空格为什么经常“消失”
HTML 默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，且首尾空格会被忽略。这不是 bug，是规范行为——innerHTML 渲染、textContent 赋值、甚至模板字符串插值后塞进 DOM，都会触发这个规则。
常见现象： 显示正常，但用 JS 动态拼接字符串加多个 " "，结果只看到一个空格；或者从接口返回带空格的文本，直接 el.textContent = data 后格式全乱。
用 还是 white-space？看场景
静态 HTML 里写 没问题，但动态加载时硬塞一堆 不可维护，也容易被 DOM 解析或框架（如 Vue/React）二次处理掉。更可靠的是控制 CSS 行为：
-
white-space: pre：保留所有空白和换行，但不自动换行（文字超出容器也不折行） -
white-space: pre-wrap：推荐！保留空白和换行，同时支持自动换行 -
white-space: pre-line：合并连续空格，但保留换行符
注意：pre 类值对 textarea 或 pre 标签默认生效，普通 div / span 需显式设置。
立即学习“前端免费学习笔记（深入）”；
JS 动态插入带空格文本的实操方案
不要依赖字符串里塞多个空格字符，优先用 CSS 控制显示逻辑。若必须用纯文本方式（比如兼容老环境或 SSR 场景），可用以下组合：
- 服务端或 API 返回时，把关键空格转成
-
前端 JS 赋值前，用正则替换：
text.replace(/ /g, " ")，再设innerHTML（⚠️注意 XSS 风险，仅限可信内容） - 更安全的做法：用
document.createTextNode()+Node.replaceChildren()分段插入，空格用document.createTextNode(" ")
const container = document.getElementById("text");
const parts = ["姓名", " ", "张三", " ", "年龄", " ", "25"];
container.replaceChildren(
...parts.map(p => p === " " ? document.createTextNode(p) : document.createTextNode(p))
);
Vue / React 等框架里空格失效的典型原因
框架模板编译阶段就做了空白压缩。比如 Vue SFC 中：
<div>
{{ name }}
{{ age }}
</div>
两处变量间的多个空格+换行，在编译后被删掉。解决方法：
- 在绑定表达式中显式加
{{ name }} {{ age }} - 用
v-html（Vue）或dangerouslySetInnerHTML（React）配合预处理空格（同样注意内容可信） - 给外层元素加
style="white-space: pre-wrap"，让框架生成的文本节点按 CSS 规则渲染
最省心的方式其实是：别指望靠“多打几个空格”来排版，该用 flex 布局的用 flex，该用 CSS 控制间距的用 margin 或 gap —— 空格语义是分隔词，不是控制 UI 距离。
