要实现代码区域横向滚动，必须用<pre><code>结构并设置<pre>宽高与overflow-x: auto、<code>white-space: nowrap和display: block。
<code> 标签本身不支持滚动，它只是语义化标记内联代码片段。真正要实现可滚动的「代码区域」，必须用 <pre> 包裹 <code>，再配合 CSS 控制溢出行为。
为什么 <code> 单独设 overflow 无效
<code> 是行内元素，默认不生成块级盒、不响应 width/height 和 overflow。即使强行加 display: block，也缺乏内容换行控制和预格式化能力——长代码行会撑破容器，滚动条不会出现。
- 正确结构必须是：
<pre><code>...</code></pre> -
<pre>保留空白符与换行，天然适合代码展示 - 只有包裹它的父容器（如
<pre>或额外<div class="code-block">）才应设置尺寸和overflow
让 <pre><code> 区域横向滚动的关键 CSS
目标：长代码行不折行、不撑宽容器，而是触发横向滚动条。核心是三步：
- 给
<pre>设固定宽高（或max-width），并声明overflow-x: auto；overflow-y: hidden可选（防意外纵滚） - 给内部
<code>加white-space: pre; display: block（确保继承<pre>的空白处理） - 禁用自动换行：
white-space: nowrap必须作用在<code>上，不是<pre>—— 否则空格和缩进会被压缩
示例：
立即学习“前端免费学习笔记（深入）”；
.code-block {
width: 100%;
max-width: 600px;
overflow-x: auto;
}
.code-block pre {
margin: 0;
padding: 12px;
background: #2d2d2d;
color: #f8f8f2;
}
.code-block code {
white-space: nowrap; /* 关键 */
display: block;
}移动端横向滚动体验差？得绕开 scrollLeft 直接赋值
在 iOS Safari 或部分安卓 WebView 中，对 <pre> 直接改 scrollLeft 常无效或卡顿。这不是 bug，而是这些环境对非 scrollable 元素的 scroll 属性写入做了限制。
- 优先用
element.scrollTo({ left: x, behavior: 'auto' })—— 它在所有现代浏览器中可靠 - 若需平滑滚动，改用
scrollTo({ left: x, behavior: 'smooth' })，但注意：iOS Safari 15.4+ 才支持smooth的横向滚动 - 避免监听
window或document.body的 scroll 事件来同步代码块——它们不可写，且无横向滚动上下文
常见踩坑点：复制粘贴后滚动失效
用户复制带缩进的代码进编辑器再渲染时，常因多余空格、全角字符或不可见 Unicode（如 \u200b）导致 white-space: nowrap 失效，滚动条消失。
- 调试时用 DevTools 选中
<code>元素 → 右键「Edit as HTML」，检查是否有隐藏字符 - 服务端或前端预处理时，可用
.replace(/[\u200b-\u200f\u202a-\u202f]/g, '')清理零宽字符 - CSS 中加
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace，避免等宽字体缺失导致宽度计算错乱
横向滚动是否生效，最终只取决于三件事：容器是否溢出、white-space 是否锁定不换行、以及目标元素是否真正可滚动——别被 <code> 这个标签名带偏了方向。
