html解析器会合并连续空白字符，故源码中多个空格仅渲染为一个；可用 、white-space属性（如pre-wrap）或标签保留空格。
为什么连续空格在HTML里只显示一个
HTML解析器在构建DOM时会主动合并连续空白字符（包括空格、\t、\n），这是规范行为，不是bug。这意味着你在源码里敲10个空格，浏览器渲染后只剩1个——哪怕用开发者工具看DOM树，文本节点里也已被压缩过。
用 插入不可合并的单个空格
是最直接的应对方式，它代表“不换行空格”，每个都会被当作独立字符保留：
- 写
Hello World→ 渲染出三个空格 - 它不会因父容器宽度不足而在此处换行，适合固定对齐（如表单标签后加空隙）
- 不能用于属性值分隔，比如
<div class="a b"> 会导致class解析异常 <li>宽度等同普通空格，不支持CSS缩放；若需更窄/更宽，得换用 <code>或 -
white-space: pre：完全保留所有空白和换行，但禁止自动换行，容易撑破容器 -
white-space: pre-wrap：推荐首选，保留空格与换行，同时允许长文本折行 -
white-space: pre-line：只保留换行符，连续空格仍被合并，适合日志类内容 - 注意：该属性作用于**块级容器**，不能加在
<span></span>上再指望内部空格生效（除非设为display: inline-block） - 源码中按空格键输入几个空格，页面就显示几个，无需实体编码
- 默认等宽字体，若要改字体，必须显式加CSS，例如
<pre class="brush:php;toolbar:false;" style="font-family: sans-serif"></pre> - 不适合嵌入段落中间——它自带上下外边距，且语义上表示“预格式化文本”，SEO和可访问性有影响
- 动态插入内容时，JS拼接字符串里的
' '依然会被压缩，得用' '或String.fromCharCode(160)
用 white-space 控制整块文本的空白行为
当需要保留多空格+换行+缩进时，white-space 比堆 更可靠：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
用 <pre class="brush:php;toolbar:false;"></pre> 标签快速保留原始格式
<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre + font-family: monospace 的快捷写法：
真正容易被忽略的是：空格合并发生在HTML解析阶段，不是CSS渲染阶段。所以哪怕你给文字加了 letter-spacing，也无法恢复已被合并掉的空格——必须从源头控制，要么用实体，要么用 white-space，要么用 <pre class="brush:php;toolbar:false;"></pre>。
