pre标签内空格塌陷是因浏览器解析时先压缩空白再应用white-space: pre；应设white-space: pre-wrap、tab-size: 4、等宽字体，并构建时将\t转为空格统一缩进。
pre 标签里空格被合并怎么办
直接往 <pre class="brush:php;toolbar:false;"></code> 里塞带缩进的代码，渲染出来缩进“塌陷”——明明写了 4 个空格，显示只剩 1 个。这不是你写错了，是浏览器默认把连续空白（空格、<code>\t</code>、<code>\n</code>）全压缩成单个空格。</p>
<p>根本原因在于 <code><pre class="brush:php;toolbar:false;"></code> 默认用了 <code>white-space: pre</code>，它只保留换行和原始空格数量，但不阻止解析器先做一轮折叠（尤其当内容来自 innerHTML 动态插入时）。更麻烦的是，有些编辑器复制出来的代码混着 <code>\t</code> 和空格，而不同浏览器对 <code>\t</code> 的制表位宽度理解还不一样（Chrome 默认 8 列，Firefox 常为 4 列）。</p>
<ul>
<li>显式加 <code>white-space: pre-wrap</code>：保留所有空格与换行，同时允许折行，避免横向溢出</li>
<li>配合 <code>tab-size: 4</code> 统一 Tab 显示宽度（注意 IE 不支持，Edge 16+ 起可用）</li>
<li>字体必须用等宽：比如 <code>font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace</code></li>
<li>服务端或构建时预处理：把源字符串里的 <code>\t</code> 全替换成 4 个空格，再塞进 <code><pre class="brush:php;toolbar:false;"></code></li>
</ul>
<H3>为什么 <pre class="brush:php;toolbar:false;"><code> 嵌套后样式丢失或溢出</H3>
<p>很多人写 <code><pre class="brush:php;toolbar:false;"><code>...</code></pre>，结果高亮失效、缩进错乱、甚至横向滚动条弹出。问题常出在两层嵌套的空白处理逻辑冲突：<pre class="brush:php;toolbar:false;"></code> 管换行和空格，<code><code></code> 是纯语义标签，不自带空白控制；如果 CSS 没覆盖到 <code>code</code> 内部，它的 <code>font-size</code> 或 <code>line-height</code> 可能被父级重置，导致字符错位。</p>
<ul>
<li>确保 <code>pre code</code> 选择器设置了 <code>white-space: inherit</code>，别让它被其他规则意外覆盖</li>
<li>避免给 <code><code></code> 单独设 <code>display: block</code> 或 <code>inline</code>——它本该继承 <code><pre class="brush:php;toolbar:false;"></code> 的行为</li>
<li>如果用了 highlight.js 等库，检查是否启用了 <code>ignoreIllegals: true</code>，否则缩进不一致可能直接导致解析中断</li>
<li>溢出问题优先查 <code>pre</code> 是否漏了 <code>overflow-x: auto</code>，而不是硬加 <code>width</code></li>
</ul>
<H3>代码块里混用空格和 Tab 导致缩进错乱</H3>
<p>从 VS Code 或 PHPStorm 复制的代码，经常出现 if 块用 4 空格，里面 for 循环却用 1 个 <code>\t</code>。高亮后视觉上缩进“跳一级”，Python 用户尤其头疼——这不是语法错误，是渲染错位。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>这种问题无法靠 CSS 修好，必须在内容进 DOM 前清洗：</p>
<ul>
<li>用正则统一替换： <code>source.replace(/\t/g, ' ')</code>（4 个空格），别信“自动检测 Tab 宽度”</li>
<li>再跑一次“去首行缩进”：提取所有行开头空格数，取最小值，用 <code>.replace(/^ {0,100}/gm, '')</code> 批量削掉</li>
<li>若要保留原始 Tab 语义（比如展示编辑器真实效果），必须搭配 <code>tab-size: 4</code> + 等宽字体，并确认目标浏览器支持</li>
<li>警惕零宽空格（<code>\u200b</code>）或非断空格（<code> </code>）混入——它们不会被 <code>replace(/\s/g)</code> 捕获，得单独过滤</li>
</ul>
<H3>动态插入代码块时空白节点悄悄捣乱</H3>
<p>用 <code>el.innerHTML = '<pre class="brush:php;toolbar:false;"><code>...</code></pre>' 看似干净，但如果字符串里有换行或缩进（比如模板字符串多行书写），浏览器仍会把换行解析成文本节点，导致 <pre class="brush:php;toolbar:false;"></code> 外围多出不可见间隙，甚至影响父容器布局。</p>
<ul>
<li>最稳做法：模板字符串严格连写，不要换行 —— <code>`<pre class='brush:php;toolbar:false;'>${code}</pre>`
el.normalize()，清除残留的空文本节点textContent 替换：它会转义 HTML 字符， 变成 <code><，代码直接失效
$('<pre class="brush:php;toolbar:false;"><code>...</code></pre>').appendTo(el) 比 el.html(...) 更容易保留结构，但依然要处理源字符串中的空白pre 上锁 white-space + 字体钉死等宽——别指望运行时靠一堆 hack 补齐。 
