代码块长行把页面撑宽 复制按钮跑到屏幕外面

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

文章里的代码块行太长，手机上整页被撑宽，右上角的复制按钮直接跑到屏幕外面，想点都点不到。先别急着动参数，把报错原文和时间点记下来，顺序反了容易白折腾。

原因不复杂，pre 默认 white-space: pre，宽度跟着最长的那行代码走，没设 overflow-x 时会把整页布局一起撑宽。这一条在手机上特别明显，代码越长越糟，容器也跟着变形。

这次卡住的地方就在「代码块横向溢出」这一环，单独把它拎出来验证，别和其他改动混在同一次发布里。改完隔一天再看一次，当场正常不代表能稳住。

测试环境和线上的差别，往往就在版本号和那几行被忽略的配置上。

处理上按这个顺序：给 pre 加 overflow-x: auto，让长行在自己的框里横向滚，别让父级跟着变宽；再加 max-width: 100%，限制它不超过父容器的宽度，两条一起写才稳；复制按钮改成绝对定位，固定在代码块右上角，别跟着内容走。

改完只确认一件事：手机页面不再整体左右拖动，代码块内部能单独横滑，按钮固定在右上角。