怎么用CSS实现博客文章页代码块横向滚动？-css教程-PHP中文网

代码块需设 white-space: pre 和 overflow-x: auto 并作用于容器，以防止长行溢出；同时需设置 width: 100% 等固定宽度上下文，避免对单独设 display: block。

怎么用css实现博客文章页代码块横向滚动？

代码块默认不换行导致内容溢出

博客文章里的

<code></code> 块如果包含长行代码（比如 JSON、URL、单行命令），浏览器默认会撑宽容器甚至破坏布局。这不是“样式没加好”，而是 <code>white-space</code> 和 <code>overflow</code> 的组合行为没被显式控制。

关键点在于：仅设 overflow-x: auto 不够，因为默认 white-space: normal 会让文本折行，而代码块需要保持原始换行和空格，所以必须用 white-space: pre 或 pre-wrap —— 但后者仍可能折行，真正可靠的是 white-space: pre 配合 overflow-x: auto。

white-space: pre：保留空格与换行，不自动折行
overflow-x: auto：只在内容超宽时出现横向滚动条
必须给或 设置固定宽度上下文（如 width: 100%），否则 overflow 可能不生效
避免对 单独设 display: block，它默认是 inline 元素，直接加 overflow 无效

推荐写法：作用于容器而非

绝大多数博客生成器（如 Hugo、VuePress、Jekyll）输出的代码块结构是

<pre class="brush:php;toolbar:false;">

上，因为它是块级容器，且包裹了整段代码。直接写在 上基本无效。

最小可用 CSS：

pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

加 max-width: 100% 是为了防止在窄屏下因内部长行把父容器撑爆
不要用 width: 100% —— 在某些 flex 或 grid 父容器里会导致计算异常
如果用了 Prism.js 或 Highlight.js，它们的高亮容器也是，同样适用

移动端滚动体验差？加 `scrollbar-width` 和 `-webkit-overflow-scrolling`

iOS Safari 和旧版 Android 浏览器默认隐藏滚动条，用户可能根本不知道可以横滑；更糟的是，部分版本滑动卡顿。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Firefox 支持 scrollbar-width: thin（或 none），让滚动条更轻量
iOS Safari 需要 -webkit-overflow-scrolling: touch 激活原生惯性滚动（注意：iOS 16+ 已弃用，但对 iOS 15 及更早仍关键）
滚动条样式无法跨浏览器统一，别花时间写 ::-webkit-scrollbar —— 小屏设备上它常被裁切，且干扰阅读

增强版规则：

pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

为什么加了还不能滚？检查这三处

最常见失效不是 CSS 写错，而是上下文干扰：

的某个父元素设置了 overflow: hidden（比如卡片容器、文章正文 wrapper），会剪掉滚动区域
使用了 CSS-in-JS 或 scoped style（如 Vue SFC），CSS 优先级不够，被重置样式覆盖（比如 Tailwind 的 whitespace-normal）
代码块被包裹在或 里，但没把 overflow 透传到最外层容器调试建议：在 DevTools 里选中，看 Computed 面板中 overflow-x 是否为 auto，再往上逐层检查 overflow 和 white-space 计算值。横向滚动看着简单，实际卡点都在父容器约束和渲染上下文里 —— 很多人调半小时，最后发现是 article wrapper 多写了句 overflow: hidden。