根本原因是默认white-space:normal重置格式，须给设white-space:pre-wrap、overflow-x:auto、min-width及touch-action:pan-y，并确保正确嵌套且内容html转义。
为什么 <pre class="brush:php;toolbar:false;"></pre> 在表格里会错位或换行异常
直接把 <pre class="brush:php;toolbar:false;"></pre> 塞进 <td> 里，常出现文字被截断、缩进丢失、横向滚动失效——根本原因是表格单元格默认启用 <code>white-space: normal，会主动折行并压缩空白，把 <pre class="brush:php;toolbar:false;"></pre> 的格式重置了。
解决思路不是“套得更深”，而是让 <td> 主动退让：显式覆盖空白处理行为，并给足宽度空间。
<ul><li>必须给 <code><td> 加 <code>white-space: pre 或 white-space: pre-wrap（推荐后者，兼顾可读性和换行控制）
text-overflow: ellipsis 类样式（很多 CSS 框架默认加了）overflow-x: auto 和固定最小宽度（如 min-width: 200px），避免撑破表格<pre class="brush:php;toolbar:false;"></pre> 自己设 width，它应由父级 <td> 控制
<h3>
<code><pre class="brush:php;toolbar:false;"></pre> 里写代码要不要转义 HTML 字符
要。如果代码片段含 、<code>>、&（比如 <div> 或 <code>for (i ），不转义就会被浏览器解析成标签或实体，轻则显示错乱，重则破坏 DOM 结构。
<p>转义不是选配，是硬性要求：</p>
<ul>
<li>手写时：把 <code> 换成 <code><，> 换成 >，& 换成 &
textContent 赋值，或先用 document.createElement('pre').textContent = codeStr 再 append，避免 innerHTML 解析风险| escape 或等效过滤器用 <code> 套 <pre class="brush:php;toolbar:false;"></pre> 是不是多余
不是多余，是语义必需。<pre class="brush:php;toolbar:false;"></pre> 只管保留空白和换行，<code> 才告诉浏览器“这是计算机代码”，影响字体（通常等宽）、可访问性（屏幕阅读器识别）、以及未来可能的语法高亮逻辑。
正确嵌套只有这一种：
<td>
<pre class="brush:php;toolbar:false;"><code class="js">function hello() {
console.log("hi");
}</code>
常见错误：
- 只用
<pre class="brush:php;toolbar:false;"></pre>不套<code>→ 丢失语义，CSS 选择器pre code失效 - 把
<code>放在<pre class="brush:php;toolbar:false;"></pre>外面（如<code><pre class="brush:php;toolbar:false;">...</pre>）→ 无效 HTML，浏览器会自动修正，但不可靠 - 给
<code>单独设white-space→ 无效，格式控制权在<pre class="brush:php;toolbar:false;"></pre>和<td> <h3>移动端表格里 <code><pre class="brush:php;toolbar:false;"></pre>横向滚动失效怎么办常见现象：PC 上能左右拖动看长代码，手机上一碰就整个页面滑动，
<pre class="brush:php;toolbar:false;"></pre>内容卡死不动。本质是移动端浏览器对overflow-x: auto的触发条件更苛刻，且常被父级容器的touch-action拦截。关键修复点：
<td> 必须设 <code>overflow-x: auto（仅设<pre class="brush:php;toolbar:false;"></pre>不够）- 加
-webkit-overflow-scrolling: touch（iOS Safari 仍需此 hack） - 阻止父级表格响应横向手势：
<table style="touch-action: pan-y">，让手指横向滑只作用于 <code><td> 内部 <li>避免给 <code><td> 设 <code>max-width过小（如max-width: 100%），它会压制overflow生效复杂点在于，不同 iOS 版本对
touch-action支持不一，而安卓 Chrome 对-webkit-overflow-scrolling已弃用——实际项目里往往得同时写两套规则，再用@supports隔离。
