要实现代码区域横向滚动，必须用结构并设置宽高与overflow-x: auto、white-space: nowrap和display: block。

<code> 标签本身不支持滚动，它只是语义化标记内联代码片段。真正要实现可滚动的「代码区域」，必须用 <pre class="brush:php;toolbar:false;"></pre> 包裹 <code>，再配合 CSS 控制溢出行为。

为什么 <code> 单独设 overflow 无效

<code> 是行内元素，默认不生成块级盒、不响应 width/height 和 overflow。即使强行加 display: block，也缺乏内容换行控制和预格式化能力——长代码行会撑破容器，滚动条不会出现。

• 正确结构必须是：<pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>
• <pre class="brush:php;toolbar:false;"></pre> 保留空白符与换行，天然适合代码展示
• 只有包裹它的父容器（如 <pre class="brush:php;toolbar:false;"></pre> 或额外 <div class="code-block">）才应设置尺寸和 <code>overflow

  让 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 区域横向滚动的关键 CSS</pre>

  目标：长代码行不折行、不撑宽容器，而是触发横向滚动条。核心是三步：

  • 给 <pre class="brush:php;toolbar:false;"></pre> 设固定宽高（或 max-width），并声明 overflow-x: auto；overflow-y: hidden 可选（防意外纵滚）
  • 给内部 <code> 加 white-space: pre; display: block（确保继承 <pre class="brush:php;toolbar:false;"></pre> 的空白处理）
  • 禁用自动换行：white-space: nowrap 必须作用在 <code> 上，不是 <pre class="brush:php;toolbar:false;"></pre> —— 否则空格和缩进会被压缩

  示例：

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

  .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 class="brush:php;toolbar:false;"></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> 这个标签名带偏了方向。