代码块需设 white-space: pre 和 overflow-x: auto 并作用于 容器，以防止长行溢出；同时需设置 width: 100% 等固定宽度上下文，避免对 单独设 display: block。
代码块默认不换行导致内容溢出
博客文章里的 <pre class="brush:php;toolbar:false;"><code></code> 块如果包含长行代码（比如 JSON、URL、单行命令），浏览器默认会撑宽容器甚至破坏布局。这不是“样式没加好”，而是 <code>white-space</code> 和 <code>overflow</code> 的组合行为没被显式控制。</p>
<p>关键点在于：仅设 <code>overflow-x: auto</code> 不够，因为默认 <code>white-space: normal</code> 会让文本折行，而代码块需要保持原始换行和空格，所以必须用 <code>white-space: pre</code> 或 <code>pre-wrap</code> —— 但后者仍可能折行，真正可靠的是 <code>white-space: pre</code> 配合 <code>overflow-x: auto</code>。</p>
<ul>
<li><code>white-space: pre</code>：保留空格与换行，不自动折行</li>
<li><code>overflow-x: auto</code>：只在内容超宽时出现横向滚动条</li>
<li>必须给 <code><pre class="brush:php;toolbar:false;"></code> 或 <code><code></code> 设置固定宽度上下文（如 <code>width: 100%</code>），否则 <code>overflow</code> 可能不生效</li>
<li>避免对 <code><code></code> 单独设 <code>display: block</code>，它默认是 inline 元素，直接加 overflow 无效</li>
</ul>
<H3>推荐写法：作用于 <code><pre class="brush:php;toolbar:false;"></code> 容器而非 <code><code></code></H3>
<p>绝大多数博客生成器（如 Hugo、VuePress、Jekyll）输出的代码块结构是 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>
滚动必须加在 <pre class="brush:php;toolbar:false;"></pre> 上，因为它是块级容器，且包裹了整段代码。直接写在 <code><code> 上基本无效。
立即学习“前端免费学习笔记（深入）”；
最小可用 CSS：
pre {
white-space: pre;
overflow-x: auto;
max-width: 100%;
}
- 加
max-width: 100%是为了防止在窄屏下因内部长行把父容器撑爆 - 不要用
width: 100%—— 在某些 flex 或 grid 父容器里会导致计算异常 - 如果用了 Prism.js 或 Highlight.js，它们的高亮容器也是
<pre class="brush:php;toolbar:false;"></code>，同样适用</li> </ul> <H3>移动端滚动体验差？加 <code>scrollbar-width</code> 和 <code>-webkit-overflow-scrolling</code></H3> <p>iOS Safari 和旧版 Android 浏览器默认隐藏滚动条，用户可能根本不知道可以横滑；更糟的是，部分版本滑动卡顿。</p> <ul> <li>Firefox 支持 <code>scrollbar-width: thin</code>（或 <code>none</code>），让滚动条更轻量</li> <li>iOS Safari 需要 <code>-webkit-overflow-scrolling: touch</code> 激活原生惯性滚动（注意：iOS 16+ 已弃用，但对 iOS 15 及更早仍关键）</li> <li>滚动条样式无法跨浏览器统一，别花时间写 <code>::-webkit-scrollbar</code> —— 小屏设备上它常被裁切，且干扰阅读</li> </ul> <p>增强版规则：</p> <pre class='brush:php;toolbar:false;'>pre { white-space: pre; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } </pre> <h3>为什么加了还不能滚？检查这三处</h3> <p>最常见失效不是 CSS 写错，而是上下文干扰：</p> <ul> <li> <code><pre class="brush:php;toolbar:false;"></pre>的某个父元素设置了overflow: hidden（比如卡片容器、文章正文 wrapper），会剪掉滚动区域 - 使用了 CSS-in-JS 或 scoped style（如 Vue SFC），CSS 优先级不够，被重置样式覆盖（比如 Tailwind 的
whitespace-normal） - 代码块被包裹在
<figure></figure>或<div class="highlight"> 里，但没把 <code>overflow透传到最外层容器调试建议：在 DevTools 里选中
<pre class="brush:php;toolbar:false;"></pre>，看 Computed 面板中overflow-x是否为auto，再往上逐层检查overflow和white-space计算值。横向滚动看着简单，实际卡点都在父容器约束和渲染上下文里 —— 很多人调半小时，最后发现是 article wrapper 多写了句
overflow: hidden。
