浏览器默认折叠连续空格，需用white-space: pre-wrap保留空格与换行并自动折行，或用 插入单个不可折叠空格；pre标签虽能原样保留但有语义和样式限制。
连续空格在 HTML 中默认不显示，不是你写错了，是浏览器按规范把一串空格、制表符、换行全压缩成一个——想让它原样出现，必须显式干预。
用 white-space: pre-wrap 批量保留空格和换行
这是最实用、最可控的方案，尤其适合用户输入、日志、诗歌、带缩进的文本等场景。它既保留原始空格与换行，又允许长行自动折行，不会撑破容器。
-
pre-wrap对<div>、<code><p></p>、<span></span>都生效，但对纯<span></span>（默认 inline）需确认父容器未限制高度或溢出 - 别直接给整个页面加这个样式——比如设在
上，会导致所有段落无法正常折行，移动端尤其明显 - 如果内容来自 API 或 CMS，记得先做 HTML 转义（如把
变成 <code><），否则pre-wrap会把未闭合标签当真实 HTML 解析，结构崩坏 - 配合
word-break: break-word可防超长无空格字符串（如 base64）不换行 - 每个
- 别写成
 （漏分号）——浏览器当普通文本，不解析 - 在 React/Vue 模板里，若用
v-html或dangerouslySetInnerHTML渲染含 - 中英文混排时，
- 默认使用等宽字体（
monospace），中文显示发虚、字号偏小，必须手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 禁止嵌套在
<p></p>内——HTML 规范不允许块级元素出现在段落中，浏览器会自动闭合<p></p>，导致 DOM 结构错乱 - 不自动换行，长代码行直接溢出容器；若强行加
white-space: pre-wrap到<pre class="brush:php;toolbar:false;"></pre>上，等于绕过它的默认行为，不如直接用<div style="white-space: pre-wrap"> <li>内容含 <code>、<code>>时，若没转义，会被当作标签解析——动态内容风险高 - 父容器设了
overflow: hidden或text-overflow: ellipsis，pre-wrap内容照样被截断 - 目标元素是
<span></span>且父级是<p></p>，而<p></p>自带 margin 和 line-height，可能掩盖空格视觉效果 - 用 JS 动态设置内容时：
element.textContent = " a b "不会保留空格；必须用element.innerHTML = " a b "并配white-space，或用document.createTextNode(" ")手动拼接 - 响应式布局下，靠空格对齐的方案基本失效——字体缩放、屏幕密度、系统字体替换都会让“三个空格”的像素宽度飘移
用 插入单个不可折叠空格
这是最轻量的“硬塞”方式，适合小范围间距控制，比如单位前、冒号后对齐、防止词组断行。
为什么不用 <pre class="brush:php;toolbar:false;"></pre> 标签？
<pre class="brush:php;toolbar:false;"></pre> 确实能原样保留所有空白，但它不是“加空格工具”，而是一个语义化标签，表示「预格式化文本」，自带副作用。
真正容易被忽略的上下文细节
空格能不能显示出来，不只取决于你用了哪个方法，更取决于它所处的渲染上下文：
