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