浏览器默认折叠空白符是HTML规范要求，保留空格需用white-space:pre-wrap（推荐）、 （小范围补位）或<pre>（原样复刻），三者适用场景与限制各不相同。
浏览器默认会把连续空格、制表符、换行全折叠成一个空格，这不是 bug，是 HTML 规范强制要求的行为。想保留原始空格，必须显式干预——核心就三条路：white-space CSS 属性、 实体、<pre> 标签，三者适用场景和坑完全不同。
用 white-space: pre-wrap 处理动态或用户输入文本
这是最常用也最稳妥的方案，尤其适合后端返回带缩进的 JSON、日志、用户评论等含空格/换行的文本。
-
pre-wrap保留所有空格、制表符、换行，同时允许自动折行——不会撑破容器，也不丢格式 - 别用
pre：它禁用换行，长文本直接溢出，移动端尤其危险 - 别用
pre-line：它会合并连续空格，只留换行，不满足“连续空格”需求 - 必须加在块级容器上（如
<div>），对纯<span>也生效，但若父元素是内联且没设display: inline-block，可能意外失效
示例：<div style="white-space: pre-wrap;"> 这里有两个前导空格\n 这里有四个</div>
用 插入少量、语义明确的空格
是不可断空格实体，每个都渲染为一个固定宽度、不被折叠、不换行的空格。适合小范围补位，比如单位前、标题词间对齐。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是
 或 - React/Vue 中用
v-html或dangerouslySetInnerHTML渲染时，textContent会原样显示字面量 - 别堆超过 4 个：中英文混排下宽度不一致，响应式时易错乱；大量使用会让 HTML 可读性崩坏
- 它不是布局工具：想对齐字段，优先用
padding-left或 Flex，而不是靠
用 <pre> 标签托管需要像素级对齐的文本
<pre> 本质是 white-space: pre + 等宽字体 + 默认外边距，适合代码块、ASCII 图、诗歌等必须原样复刻的场景。
- 它会保留所有空白，包括 Tab 和源码换行，但也会强制用
monospace字体——若要改字体，得加font-family: "Segoe UI", sans-serif; - 禁止嵌套在
<p>里：HTML 规范不允许块级标签出现在段落中，浏览器会自动闭合<p> - 它不是“加空格”的快捷键：给普通段落套
<pre>，反而要额外重置margin、font-family、line-height，维护成本更高 - 等效替代是
<div style="white-space: pre; font-family: inherit;">，更干净，无副作用
真正容易被忽略的是上下文：静态 HTML 里 最快；用户输入或 API 返回内容，必须靠 white-space: pre-wrap + innerHTML 或 textContent；而 <pre> 只在真需要「原样」时才值得动用——多一个标签、多一套样式重置，都是隐性成本。
