如何解决CSS中pre代码块在移动端溢出的问题？-css教程-PHP中文网

pre默认不响应width约束且禁用自动换行，必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的div包裹；若允许格式简化，可用code+white-space:pre-wrap替代。

如何解决css中pre代码块在移动端溢出的问题？

pre 代码块在移动端横向溢出，不是因为内容太长，而是它默认无视父容器宽度约束，且不触发自动换行。 单纯加 overflow-x: auto 到 pre 元素上，在多数 iOS Safari 和 Android WebView 中会失效——滚动条不出现、内容被截断或直接撑破页面。

为什么 pre 默认不响应 width / max-width？

pre 是内联级元素（display: block 但有特殊渲染逻辑），它的换行行为由 white-space: pre 控制：保留所有空格与换行符，同时**禁止自动折行**。这意味着即使父容器设了 max-width: 100%，pre 仍会按原始字符流无限延展，浏览器不会主动压缩它。

iOS Safari 15.4+ 对 pre 的 overflow 处理更严格，若未显式触发 BFC 或未加 -webkit-overflow-scrolling: touch，横向滚动会卡死
安卓 X5 内核（微信）至今不支持 pre 上的 overflow-x: auto 直接生效，必须靠外层包裹
pre 若嵌套在 flex 容器中，且父项没设 min-width: 0，flex 的默认 min-width: auto 会锁死收缩，导致外层 overflow 彻底无效

必须用 wrapper + display: block + overflow-x: auto

不能直接对 pre 加滚动，得用一层 div 包裹，并确保该容器能正确感知宽度边界和触发滚动：

包裹 div 必须设 display: block（不能是 inline 或未声明）
必须设 width: 100% 或 max-width: 100%，且父级不能有 overflow: hidden 或 flex-shrink: 0 干扰
必须加 overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 真机刚需）
pre 自身要去掉 width、margin 等可能干扰宽度计算的样式，让它自然撑开

示例结构：

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

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

下载

<div class="pre-wrapper">
  <pre class="brush:php;toolbar:false;">const url = "https://api.example.com/v1/users/1234567890abcdef";

.pre-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5em; } .pre-wrapper pre { white-space: pre; margin: 0; padding: 0.75em; font-size: 0.875em; }

想让 pre 内容自动换行？别用 pre，改用 code + white-space: pre-wrap

如果业务允许牺牲部分原始格式（比如多空格缩进可简化为单空格），更轻量的方案是放弃 pre 标签，改用 code 并配合 white-space: pre-wrap：

真正难处理的从来不是“要不要滚动”，而是当 pre 出现在 flex 或 grid 布局深层嵌套里时，min-width: 0 是否被显式继承、-webkit-overflow-scrolling 是否漏写、以及真机测试是否覆盖了 iOS 16.3 和微信 X5 内核——这些点一漏，整个滚动就静默失效。