标签默认禁用自动换行，因继承white-space: pre（或pre-wrap），保留空格与换行但不折行；需显式设white-space: pre-wrap并配合max-width和overflow-wrap: break-word才能安全折行。
code标签默认禁用换行，必须显式覆盖
<code> 是内联元素，默认应用 white-space: pre（或 pre-wrap，取决于浏览器），它保留空格和换行符，但**禁止自动折行**——哪怕内容是纯英文单词或长数字串，也会横向溢出容器。这不是 bug，是设计使然：代码块需保持字符对齐和语义完整性。
所以不能只写 overflow-wrap: break-word 就完事。你得先松开 white-space 的锁：
- 显式设
white-space: pre-wrap：保留原始缩进与换行，同时允许在容器右边界折行 - 禁用
white-space: nowrap或pre（后者不折行，pre-wrap才是平衡点） - 避免父级（如
<pre class="brush:php;toolbar:false;"></pre>）或框架样式（如 Prism.js 默认类）偷偷覆写该值
英文/数字串折行必须配宽度约束 + overflow-wrap
即使写了 white-space: pre-wrap，若容器没宽度限制，浏览器根本不会触发折行判断——它会优先把 <code> 拉宽。关键组合如下：
- 给
<code>或其父容器设max-width（如max-width: 100%或具体像素值） - 加
overflow-wrap: break-word：只在整词超宽时断，保全 URL、变量名可读性 - 兼容旧 Safari：双写
word-wrap: break-word（已废弃但仍有效） - 别用
word-break: break-all：它会把fetchUserData切成fetchU+serData，破坏语义
中英文混排时要防中文被误切
如果 <code> 里混了中文（比如注释或日志输出），仅靠 overflow-wrap: break-word 不够：中文按字断是合理的，但英文单词仍需整体保护。此时需叠加：
-
word-break: keep-all：阻止中/日/韩文字被拆开（如“北京市”不会变成“北”+“京市”） -
overflow-wrap: break-word：对超长英文、URL、哈希值等仍生效 - 注意：二者不冲突，
keep-all管汉字边界，break-word管英文词边界 - 避免
word-break: break-all—— 它会覆盖keep-all，且让所有语言都硬切
动态注入时别让白加
有人想在长 URL 或驼峰变量里手动插 <wbr></wbr>，但在 <code> 里基本无效——因为 white-space: pre-wrap 会把 <wbr></wbr> 当普通文本节点渲染，不触发浏览器的“可断点”逻辑。
真要精细化控制，只在以下情况考虑：
- 内容是纯 HTML 字符串（非代码），且已用
white-space: normal替代pre-wrap -
<wbr></wbr>插在语义位置：URL 的/后、驼峰大写字母前（如fetch<wbr>Data</wbr>）、数字字母交界处（如v2<wbr>beta</wbr>） - 服务端模板处理更安全（如 Nunjucks 的
{{ url | wbr }}），前端 JS 遍历文本节点时需避开<code>内部
最常被忽略的是：你改了 CSS，但忘了检查 <code> 是否被包裹在 display: flex 的父容器里——这时还得加 min-width: 0，否则 flex item 会拒绝收缩，折行永远不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
