html中连续空格被合并是规范行为，需用 、white-space css或标签实现多空格显示，其中pre-wrap最推荐；全角空格和letter-spacing不适用，关键在区分视觉对齐与语义空格需求。
浏览器默认会把连续空格合并成一个，这不是 bug，是 HTML 规范行为；要真正显示多个空格，必须绕过这个折叠机制。
用 替换每个空格
这是最直接、兼容性最好的方法，适合少量、位置固定的空格需求。
-
- 比如想显示
"a b"（a 和 b 之间四个空格），就得写成a b - 注意：
<div class="a b"> 会出错） <li>如果文档编码不是 UTF-8，<code>可能显示为乱码，务必确认<meta charset="UTF-8"> -
white-space: pre：完全保留所有空白符（空格、制表符、换行），且不自动换行 —— 行为类似<pre class="brush:php;toolbar:false;"></pre>，但不强制等宽字体 -
white-space: pre-wrap：推荐首选，保留空格和换行，同时允许内容在容器边界处正常折行 -
white-space: pre-line：只保留换行符，合并连续空格为单个 —— 适合“换行重要、空格不重要”的场景 - 不要设在
或全局p上，否则影响所有段落；应加在具体容器上，例如<div class="code-sample" style="white-space: pre-wrap">...</div> -
<pre class="brush:php;toolbar:false;"></pre>内部所有空白（包括缩进、空行）原样渲染，无需改写空格 - 默认使用等宽字体，若要改字体，必须显式用 CSS 覆盖，例如
font-family: system-ui, sans-serif; - 它是个块级元素，会自带上下外边距，可能破坏原有布局流，必要时用
margin: 0重置 - 语义上表示“预格式化文本”，不适合用于普通段落中的局部空格调整
- 全角空格（中文输入法下的空格）虽能绕过折叠，但属于 Unicode 字符，语义混乱、可访问性差，不建议用于结构化内容
-
letter-spacing和word-spacing控制的是字符/词间距，不是插入空格，不能替代空白符保留逻辑 - 在 Vue/React 等框架中，JSX 里写多个空格仍会被编译器压缩，必须用
{"\u00A0\u00A0"}或white-spaceCSS -
用 white-space CSS 属性整体控制
当需要保留一整段文本的原始空格和换行时，比堆 更干净、可维护。
用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹文本
适用于代码块、ASCII 图、日志输出等需严格保持格式的场景。
别踩这些坑
很多问题其实不是技术限制，而是对空格类型和作用域理解偏差导致的。
真正关键的判断点在于：你要保留的是“视觉对齐”还是“语义空格”。前者优先用 white-space: pre-wrap，后者才考虑 —— 混用或硬塞几十个 往往说明没想清楚需求本质。
