html中空格默认被浏览器折叠为一个，因遵循空白字符折叠规则；可用white-space:pre-wrap保留空格并允许换行，或用 实现小范围不可断行空格。
HTML中空格被合并的默认行为
浏览器默认会把连续的多个空格、制表符、换行符全部压缩成一个空格显示，这是HTML规范定义的“空白字符折叠”规则。所以哪怕你在源码里写了hello<space><space><space>world</space></space></space>，页面上也只显示hello world。
用white-space CSS属性控制空格显示
最直接有效的方式是给容器元素设置white-space样式。常用值有：
-
white-space: pre：保留空格和换行，但不自动换行（文本超出容器也不会折行） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（推荐日常使用） -
white-space: pre-line：合并连续空格，但保留换行符（不满足“连续空格”需求）
例如：
<p style="white-space: pre-wrap">This has multiple spaces.</p>会原样显示所有空格。
用 硬编码非断空格
如果只在个别位置需要强制保留空格（比如单位之间：100 px），用 比改CSS更轻量。注意： 是不可断行的空格，浏览器不会在它那里折行。
- 适合小范围、语义明确的空格（如数字+单位、缩写间空格）
- 不适合大段文本——可维护性差，且复制粘贴时
- 不要混用：
服务端或JS动态渲染时的注意事项
如果英文内容来自API或用户输入，直接插进DOM可能丢失空格。关键点：
- 后端返回带多余空格的字符串时，前端不能靠
innerText赋值（它会触发HTML解析和空格折叠），改用textContent或带white-space: pre-wrap的innerHTML - 用
String.replace(/\s+/g, ' ')这类清洗逻辑前，先确认是否真要删空格——有些格式依赖空格对齐（如日志、代码片段） - 移动端Safari对
pre-wrap的换行处理偶尔有偏差，若遇到文字溢出，可加word-break: break-word兜底
真正麻烦的不是选哪个方案，而是得想清楚：这些空格是有语义的（比如缩进、对齐），还是纯视觉装饰？前者必须用white-space保真，后者有时用margin或padding反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
