空格消失问题主因是white-space被意外覆盖或dom中空格未真实存在；需检查computed样式、源码及textcontent，区分普通空格与 ，警惕模板转义、url标准化及后端trim。
检查 white-space CSS 是否被意外覆盖
多数“空格消失”问题不是 HTML 本身的问题，而是父容器的 white-space 值被重置或继承了默认的 normal。比如一个 <div> 包裹了带多个空格的文本，但它的样式来自某个全局 CSS 类（如 <code>.text-sm），而该类里写了 white-space: normal，就会强制合并所有空白。
- 用浏览器开发者工具选中目标元素，看
Computed面板里white-space的最终值是什么 - 注意继承链：如果父级设了
white-space: pre-wrap，子级没显式覆盖，就沿用；但如果中间某层写了white-space: normal，就会切断继承 - 避免用通配符重置：
* { white-space: normal; }这类规则会无声干掉所有预格式化意图
确认空格是否在 DOM 中真实存在
有时候你以为写了多个空格，其实它们压根没进 DOM —— 比如 JS 拼接字符串时用了 innerText 赋值，或者后端返回的 JSON 字段里空格已被 trim 掉。
- 右键 → “查看网页源代码”，搜索对应文本片段，确认源码里是否真有多个连续空格或
- 在 Console 里执行
document.querySelector('your-selector').textContent，看返回值里空格是否还在（textContent不受 CSS 影响，能暴露原始内容） - 若用 React/Vue 渲染，检查是否误用了
{' '}（JS 字符串字面量里多个空格会被 JS 引擎自动压缩），应改用{'\u00A0\u00A0'}或String.fromCodePoint(160).repeat(2)
区分 和普通空格的渲染行为
是不换行空格（NO-BREAK SPACE），它不会被浏览器合并，也不会在行尾被折行，但它的宽度固定、不可伸缩，且无法通过 CSS 的 letter-spacing 或 word-spacing 调整。
- 想对齐文字（如“单价：¥199”和“总价：¥1,299”末尾冒号对齐），别堆
display: inline-block; width: 4em;或text-align: right配合容器 -
white-space: pre-wrap+ 普通空格更可控 - 服务端模板（如 Jinja2、Thymeleaf）若自动转义输出，
警惕 URL 或属性值里的空格被静默处理
空格出现在 href、src、title 等属性里时，虽然 HTML 允许写，但实际行为由解析器决定：URL 中的空格会被自动编码为 %20，而 title 里的连续空格仍可能被合并显示为一个。
- 检查 Network 面板里请求 URL，确认空格是否已变成
%20；如果是，说明是浏览器 URL 标准化行为，不是 bug -
title="A B"渲染时通常只显示一个空格，这是规范行为；需要保留空格请用element.title - 表单提交含空格的值，后端收到前可能已被框架 trim（如 Spring Boot 的
@RequestParam默认 trim），需显式配置required = false并手动判空
空格异常往往发生在“看不见”的环节：DOM 内容早被 JS 改写、CSS 继承链中途截断、模板引擎多了一次转义。真正要盯住的不是空格本身，而是它从源码到屏幕之间经过的每一层处理逻辑。
