pre标签需设宽高+overflow才滚动，推荐white-space:pre-wrap+word-break:break-word+max-height，移动端加-webkit-overflow-scrolling:touch，内容须html转义。
pre 标签默认不滚动，必须显式设宽高 + overflow 才生效
浏览器对 <pre class="brush:php;toolbar:false;"></pre> 的默认样式是 display: block、white-space: pre、font-family: monospace，但它**没有默认宽高限制**，所以即使内容超长，也不会触发滚动。很多人写了 overflow: auto 却没效果，根本原因是容器没设 width 或 height。
常见错误写法：<pre class="brush:php;toolbar:false;" style="overflow: auto">很长的日志…</pre> —— 这不会出现滚动条，因为 <pre class="brush:php;toolbar:false;"></pre> 高度随内容自适应，永远“不溢出”。
正确做法要同时满足三个条件：
- 给
<pre class="brush:php;toolbar:false;"></pre>或其父容器设置明确的width和/或height - 设置
overflow: auto（推荐）或overflow: scroll - 配合
white-space: pre-wrap，否则长行不换行，只靠横向滚动很难读
white-space: pre-wrap 是 pre 滚动体验的关键
<pre class="brush:php;toolbar:false;"></pre> 原生行为是 white-space: pre：保留空格换行，但**禁止自动换行**。这意味着哪怕容器只有 200px 宽，一行 500 字符的 JSON 也会横向撑开、强制滚动，用户体验差。
用 white-space: pre-wrap 可以兼顾两头：既保留原始缩进和空行，又允许长行在单词间折行（配合 word-break: break-word 或 overflow-wrap: break-word 更稳妥）。
推荐最小可用组合：
pre {
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
overflow-y: auto;
max-height: 300px;
width: 100%;
}
注意：overflow-x: auto 对长代码行更实用；overflow-y: auto 控制垂直滚动；max-height 比 height 更灵活，避免空白占满固定高度。
移动端 pre 滚动要加 -webkit-overflow-scrolling: touch
iOS Safari 对 overflow: auto 的滚动惯性支持较弱，默认滚动卡顿、无回弹。不加额外声明时，用户拖动后会立刻停止，不像原生 App 那样流畅。
解决方案很简单，在 CSS 中补上：
pre {
-webkit-overflow-scrolling: touch;
}
这个属性仅对启用了 overflow 且有实际滚动内容的元素生效，不影响桌面端。没有它，移动端 <pre class="brush:php;toolbar:false;"></pre> 查看日志或堆栈信息时，上下滑动会非常吃力。
另外注意：如果 <pre class="brush:php;toolbar:false;"></pre> 在 display: flex 容器里，子元素可能被拉伸导致 overflow 失效，此时需给 <pre class="brush:php;toolbar:false;"></pre> 加 min-height: 0 或 align-self: flex-start。
pre 里嵌 HTML 标签必须转义，否则破坏结构
直接往 <pre class="brush:php;toolbar:false;"></pre> 里塞未转义的 HTML 字符串（比如日志里含 <div>），浏览器会尝试解析它们，导致格式错乱、提前闭合、甚至脚本执行风险。
<p>必须把 <code> 替换为 <code><，> 替换为 >，& 替换为 &。服务端渲染或前端 JS 插入时都要做这一步。
例如，想显示这段代码：
<button onclick="alert(1)">Click</button>
实际应写成：
<button onclick="alert(1)">Click</button>
漏掉转义是线上环境 <pre class="brush:php;toolbar:false;"></pre> 显示异常最隐蔽的原因之一——看起来是样式问题，其实是 HTML 解析提前截断了内容。
