<code>需配合word-break和overflow-wrap实现响应式折行，禁用white-space:pre-wrap，嵌套在pre中时须设overflow-x:auto与max-width:100%，Flex/Grid容器中需显式设min-width:0。
<code> 标签本身不带响应式行为，它只是语义化标记内联代码片段；真正影响排版的是 CSS 控制方式和父容器约束逻辑。
为什么 <code> 在小屏上常被撑破或横向滚动
默认情况下，<code> 是 inline 元素，内部文本不会自动换行，长代码（如 URL、JSON key、CSS 属性名）会直接溢出容器边界。常见错误现象包括：
- 手机上出现水平滚动条，用户必须左右拖动才能看清
- 卡片或文章段落被顶宽，破坏网格列宽（尤其是
grid-template-columns: 1fr场景） - 跟在
<p>后的<code>挤压相邻文字，甚至触发换行错位
必须加的三行保命 CSS
所有项目都应全局设置，避免逐个修复：
* {
box-sizing: border-box;
}
<p>code {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
background-color: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 6px;
/<em> 关键：允许断词但不破坏可读性 </em>/
word-break: break-word;
overflow-wrap: break-word;
}
-
word-break: break-word和overflow-wrap: break-word必须同时写——前者兼容旧 Android WebView，后者是现代标准 - 别用
white-space: pre-wrap：它保留换行和空格，但会让缩进代码块在段落中突兀换行 - 别设
font-size: 1rem固定值：移动端需配合rem或clamp()缩放，例如font-size: clamp(0.8rem, 0.95vw, 0.95rem)
嵌套在 <pre><code> 中的代码块要单独处理
大段代码（如示例片段）通常用 <pre><code> 套用，此时需额外控制：
立即学习“前端免费学习笔记（深入）”；
-
<pre>必须设overflow-x: auto，否则长行直接撑破布局 - 加
max-width: 100%到<pre>，防止父容器未设width: 100%时失效 - 移动端慎用
tab-size: 4：iOS Safari 15+ 支持，但旧版会忽略，建议 fallback 到tab-size: 2 - 如果用 Prism.js 或 highlight.js，检查其主题 CSS 是否覆盖了
code的white-space—— 很多主题强行设为pre，导致无法折行
与 Grid/Flex 容器共存时最容易被忽略的点
当 <code> 出现在 display: grid 或 display: flex 的子项里，容易因 shrink 行为异常而失控：
- Flex 容器中，
<code>默认flex-shrink: 1，但若父级设了min-width: 0，它反而更易压缩变形；稳妥做法是显式加min-width: 0到<code>自身 - Grid 项中，若该格子用了
minmax(280px, 1fr)，长代码仍可能突破 280px——因为minmax()约束的是轨道，不是内容；必须靠上面说的word-break+overflow-wrap双保险 - 绝对定位的
<code>（如 tooltip 中）必须手动加max-width: 280px并设overflow: hidden，否则在小屏下会超出视口
最常被跳过的其实是语义层：不要把命令行输出、错误堆栈、HTML 标签字符串全塞进 <code>；该用 <pre> 的用 <pre>，该用 <samp> 的用 <samp>。否则再细的 CSS 也救不了语义错位带来的可访问性问题。
