应控制pre等父容器的overflow并分浏览器隐藏滚动条：chrome/safari用::-webkit-scrollbar{display:none}，firefox用scrollbar-width:none，且二者均需配合overflow:auto/scroll；code标签本身为行内元素，设置overflow无效。
code 标签本身不控制滚动条，也不会触发滚动行为——它只是一个行内语义标签，用于标记一段计算机代码。你想隐藏滚动条，实际是想对包含 的容器（比如
、<div> 或父级块元素）做滚动控制。<p>直接写 <code style="overflow: hidden"> 是无效的，因为 <code> 默认是行内元素，<code>overflow</code> 对行内元素不生效。</code></code></p>
<hr>
<h3>
<code>pre</code> 容器里放 <code>code</code> 时怎么隐藏滚动条但保留滚动</h3>
<p><code>pre</code> 是最常见包裹多行代码的容器，它默认会换行、保留空格，且常配合 <code>code</code> 使用：</p>
<pre class="brush:html;toolbar:false;"><pre class="brush:php;toolbar:false;"><code>function hello() { return 'world'; }</code>
要让它可滚动但无滚动条，关键不是动 code，而是控制 pre 的样式：
- 必须设
overflow为auto或scroll（不能是hidden） - 隐藏滚动条需按浏览器分写：
WebKit（Chrome/Safari/Edge）：
-
pre::-webkit-scrollbar { width: 0; height: 0; }单独写可能不生效 - 更稳写法是补全三个伪元素：
pre::-webkit-scrollbar-track、pre::-webkit-scrollbar-thumb、pre::-webkit-scrollbar，全部设display: none或background: transparent
Firefox：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
pre { scrollbar-width: none; }—— 只在 Firefox 生效，且要求pre有明确overflow（如overflow-y: auto） - 不能写在
html或body上，必须作用于具体滚动容器
兼容写法示例：
.code-block {
overflow-y: auto;
max-height: 300px;
}
.code-block::-webkit-scrollbar {
display: none;
}
.code-block {
scrollbar-width: none;
}
然后这样用：
```html
<code>...很长的代码...</code>```
为什么给 code 加 overflow 没用
-
code是display: inline元素 -
overflow属性只对 块级元素或设置了display: block/inline-block的元素 有效 - 即使强行加
display: block到code上，它也不具备自然的高度限制和内容截断逻辑，滚动行为不可靠
所以：别碰 code 的 overflow，只操作它的父容器（pre、div、section 等）。
移动端 Safari（iOS）的特别坑点
iOS Safari（尤其是 iOS 16+）对 ::-webkit-scrollbar 支持极不稳定：
-
display: none或width: 0经常被忽略 -
scrollbar-width: none是目前唯一可靠方式，但它只影响垂直滚动条，横向滚动条仍可能露出来 - 如果内容超宽导致出现横向滚动条，必须额外加
overflow-x: hidden（但注意：这会截断内容，不是“隐藏滚动条”）
真正安全的做法是：
- 用
white-space: pre-wrap+word-break: break-word让长代码自动折行 - 避免水平溢出，从源头消灭横向滚动条
滚动条是否可见，从来不是由 code 决定的；它是容器的渲染行为，而不同浏览器用完全不同的机制实现隐藏。写的时候得记住：你不是在“美化 code”，而是在给一个带代码的滚动盒子做跨浏览器样式兜底。
