HTML中空格会“消失”是因为浏览器按规范将连续空白字符合并为一个空格并忽略首尾空白；可通过white-space属性控制，推荐pre-wrap兼顾保留换行与自动折行。
HTML中空格为什么会“消失”
浏览器默认会把连续的空白字符（空格、制表符、换行）合并成一个空格，再忽略首尾空白。这不是bug，是HTML规范定义的渲染行为。比如写 <p> hello world </p>，实际显示为“hello world”，前后和中间多余空格全被压缩了。
常见现象包括：
- 复制代码到编辑器里缩进正常，网页里却挤成一行
- 想用多个 对齐文字，结果响应式下错位
- pre标签外的文字排版完全失控
用white-space控制空格渲染方式
CSS的white-space属性是核心开关，不同值对应不同处理逻辑：
常用取值及效果：
- white-space: normal：默认值，合并空白、折行
- white-space: nowrap：合并空白，但不折行（适合单行标题防断行）
- white-space: pre：保留所有空白和换行，像pre标签一样，但不等宽字体
- white-space: pre-wrap：保留空白和换行，同时允许折行（最常用）
- white-space: pre-line：合并连续空格，但保留换行符
推荐优先试 white-space: pre-wrap，它兼顾可读性与布局稳定性。例如显示日志片段或用户输入的带缩进文本时，加一句 style="white-space: pre-wrap;" 就能立刻生效。
不是万能解，慎用场景 （不间断空格）能强制保留单个空格，但它是字符级干预，容易引发新问题：
典型陷阱：
- 在中文段落里混用 和普通空格，导致标点悬挂或对齐错乱
- 用一堆 模拟缩进，响应式宽度变化时内容溢出容器
- 服务端返回的富文本里自动转义了 ，前端再处理反而多一层编码
真正需要它的地方其实很窄：比如“第 1 章”防止数字和汉字被折行分开，或表格中强制对齐单位（如“100 px”）。其他情况，优先走CSS方案。
服务端/模板层的预处理容易被忽略
很多空格问题其实在HTML生成阶段就埋下了。比如模板引擎（Jinja2、Twig、Vue SFC）默认会压缩输出的空白，或者后端JSON字段里存的是带缩进的字符串，但渲染时没做white-space适配。
检查点：
- 是否在模板里用了{% spaceless %}或类似指令，却忘了局部关闭？
- 接口返回的description字段含换行符，前端直接v-text插入，没加pre-wrap
- 使用innerHTML动态写入内容时，原始字符串里的制表符被当成普通空白处理了
最稳妥的做法：对含格式意图的字段，在渲染前明确加上white-space: pre-wrap，而不是指望数据源“刚好有空格”。空格的语义，得由CSS来定，不是由换行符数量来定。
