给 code 直接加 overflow 无效，因其为行内元素；需设 display: inline-block/block 才生效；多行代码须用 pre+code 组合，溢出控制加在 pre 上并设 pre code { display: block; }。
code 标签本身不防溢出，强行加 overflow-x: auto 也没用——它默认是行内元素，不接受宽高与溢出控制。
为什么直接给 code 加 overflow 无效
浏览器对行内元素（如 code、span）忽略 width、height、overflow 等块级属性。即使写了 overflow-x: auto，长代码仍会撑破容器或换行错位。
- 必须先通过
display: inline-block或display: block提升为可布局元素 - 若用于多行代码，
code不该单独出现——它没格式保留能力，应嵌套在pre中 - 单纯设
white-space: nowrap会加剧横向溢出，不是解法而是陷阱
pre + code 组合才真正可控
多行代码的防溢出，核心在 pre 层：它能保留缩进与换行，也支持 CSS 布局控制；code 则负责语义标注。两者缺一不可。
- 给
pre设white-space: pre-wrap：既保留原始空格/换行，又允许自动折行 - 加
overflow-x: auto到pre上，而非code—— 横向滚动才生效 - 必须加
pre code { display: block; }，否则code仍按行内渲染，overflow-x失效 - 对超长无空格串（如 Base64、URL），额外加
word-break: break-all或overflow-wrap: break-word
行内短代码怎么安全截断
比如文档中穿插的 fetch()、useState 这类单行片段，需在不破坏段落流的前提下防溢出。
- 设
code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 父容器（如
p）必须有明确宽度约束，否则max-width: 100%无意义 - 避免在
code里放 HTML 实体未转义内容，否则可能提前解析导致截断错位 - 移动端小屏下，更推荐用
white-space: normal配合overflow-wrap: break-word，比省略号更实用
最常被忽略的是层级归属：溢出控制必须落在直接包裹内容的元素上。写一堆 overflow 在 body 或 section 上，对 pre 内部的 code 完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
