pre默认不响应width约束且禁用自动换行，必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的div包裹；若允许格式简化，可用code+white-space:pre-wrap替代。
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等可能干扰宽度计算的样式，让它自然撑开
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="pre-wrapper"> <pre>const url = "https://api.example.com/v1/users/1234567890abcdef";</pre> </div>
对应 CSS：
.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：
-
white-space: pre-wrap保留换行符和空格序列，同时允许在空格或换行处自动折行，天然防溢出 - 它比
pre更友好：支持max-width、可被 flex 收缩、无需 wrapper 滚动 - 注意：中文混排长英文时（如
"token: abcdefghijklmnopqrstuvwxyz"），仍需补word-break: break-all防止单词撑宽
示例：
<code class="code-block">const id = "ORD-20260727-9999999999";</code>
.code-block {
white-space: pre-wrap;
word-break: break-all;
max-width: 100%;
display: inline-block;
padding: 0.5em;
font-family: monospace;
}
真正难处理的从来不是“要不要滚动”，而是当 pre 出现在 flex 或 grid 布局深层嵌套里时，min-width: 0 是否被显式继承、-webkit-overflow-scrolling 是否漏写、以及真机测试是否覆盖了 iOS 16.3 和微信 X5 内核——这些点一漏，整个滚动就静默失效。
