html中连续空格默认被浏览器折叠，需用 、white-space或绕过： 适合单行微调对齐；white-space: pre-wrap适合整段保留空格换行且可折行；适合代码等需像素级还原场景，但需处理字体和xss。
连续空格在HTML里不会原样显示，这是浏览器按规范做的空白折叠，不是你写错了——得用 、white-space或<pre class="brush:php;toolbar:false;"></pre>三者之一主动绕过它。
用 手动插入不可断空格
适合小范围对齐，比如“字段名： 值”这种单行内补位。
- 每个
- 写三个空格就得写三遍：
- 在React/Vue里动态插入时，必须用
innerHTML或v-html，textContent会把它当纯文本显示 - 中英文混排时宽度不一致：同一字体下
用white-space: pre-wrap批量保留格式
这是最平衡的方案，适合整段用户输入、日志、带缩进的JSON等需要保留原始空格+换行+又能折行的场景。
-
pre-wrap保留所有空格和换行，且允许自动折行；pre不折行，长文本会溢出容器 - 不要给整个
或长列表加这个样式，否则响应式布局会失效 - 如果父容器设了
overflow: hidden或固定宽高但没配word-break，含长串空格的行仍可能被截断 - 示例写法：
<p style="white-space: pre-wrap"> 第一行有两个前导空格<br> 第二行有四个</p>
用<pre class="brush:php;toolbar:false;"></pre>标签原样托管代码类内容
适合真正需要像素级还原的场景，比如代码块、ASCII图、诗歌——但它不是通用排版工具。
-
<pre class="brush:php;toolbar:false;"></pre>默认用等宽字体（monospace），中文显示发虚，需手动覆盖：font-family: "Segoe UI", sans-serif; - 它自带上下外边距，且禁止嵌套在
<p></p>里（HTML规范不允许） - 内容来自API或用户输入时，必须先做HTML转义，否则
<script></script>之类会被执行，引发XSS - 语义上表示“预格式化文本”，如果只是想让普通段落多两个空格，硬套
<pre class="brush:php;toolbar:false;"></pre>反而要额外重置样式
最容易被忽略的是上下文：静态HTML里 最直觉；动态内容优先用white-space: pre-wrap + textContent；而<pre class="brush:php;toolbar:false;"></pre>一旦用错语义或没处理字体/XSS，维护成本会陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
