标签内容过长时不换行也不滚动，因其为行内元素，默认忽略width、height和overflow；需用块级容器包裹、设固定/最大宽度、加overflow-x:auto三者缺一不可。
code 标签内容过长时为什么既不换行也不滚动？
因为 <code> 是行内元素，默认无视 width、height 和 overflow；浏览器会把它当作文本流中的一段字符来处理，不会主动创建滚动容器。你设了 overflow-x: auto 也没用——它根本没“溢出”的参照系。
让 code 标签支持水平滚动的三步硬要求
必须同时满足以下条件，缺一不可：
- 把
<code>包在块级容器里（比如<pre class="brush:php;toolbar:false;"></pre>或带display: block的<div>） <li>给这个容器设固定或最大宽度（如 <code>max-width: 100%或具体像素值） - 设
overflow-x: auto（不是overflow: auto，避免意外触发垂直滚动）
示例写法：
<pre class="brush:php;toolbar:false;" style="max-width: 100%; overflow-x: auto; margin: 0;"> <code>const veryLongVariableName = someExtremelyLongFunctionCallWithLotsOfParameters(...);</code>
要不要加 white-space: pre-wrap？看场景
默认 <code> 继承 white-space: normal，但包裹它的 <pre class="brush:php;toolbar:false;"></pre> 默认是 white-space: pre —— 这会导致长单词不折行、只靠滚动解决。如果你希望保留换行符又允许长行自动折断（比如展示带缩进的代码片段），才加：
-
white-space: pre-wrap：保留 \n 和空格，长行在容器右边界自动折 -
overflow-wrap: break-word：对超长无空格字符串（如 base64、URL）强制断词 - 别混用
text-overflow: ellipsis—— 它和pre-wrap冲突，省略号不会出现
移动端滚动条失效？检查两个隐藏开关
iOS Safari 和部分 Android WebView 会默认隐藏 <pre class="brush:php;toolbar:false;"></pre> 内部的滚动条，且禁止拖拽。要让它可操作：
- 加
-webkit-overflow-scrolling: touch（仅 iOS 旧版必要，2026 年多数已不需） - 确保父容器没有
touch-action: none或pointer-events: none - 更可靠的做法：给
<pre class="brush:php;toolbar:false;"></pre>加tabindex="0"，再用 JS 监听keydown支持方向键滚动（尤其对键盘用户）
真正容易被忽略的是：很多 UI 框架（比如 Tailwind 的 prose 类）会给 <code> 加 whitespace-nowrap，结果你调了半天 overflow 都没反应——先查 computed styles 看实际生效的 white-space 值。
