code标签默认不换行是因为white-space: nowrap强制禁止折行；必须显式设white-space: pre-wrap才能既保留换行符又允许自动断行，其他值如normal或pre均不适用。
为什么标签默认不换行</H3>
<p><code>code
是内联元素，浏览器默认设了 white-space: nowrap，哪怕容器窄到只剩 10px，它也拒绝折行——不是“不想”，是 CSS 明确禁止。你加 max-width、overflow-wrap: break-word 全无效，因为 white-space: nowrap 的优先级更高，直接封死了所有换行路径。
让code折行必须覆盖 white-space
code折行必须覆盖 white-space只改一个属性：显式设 white-space: pre-wrap。它保留原始空格和换行符（比如你写 <code>foo<br>bar</code> 中的 <br> 不会渲染，但换行符会），同时允许在容器右边界自动断行。
- 别用
white-space: normal：它会把所有换行符当空格，代码缩进全塌掉 - 别用
white-space: pre：保留换行但禁用自动折行，长行照样横向溢出 - 配合加
overflow-wrap: break-word可处理超长无空格字符串（如 base64 片段）
常见失效场景与修复
即使写了 white-space: pre-wrap，仍不折行？大概率是这些地方卡住了：
- 父容器设了
display: flex且子项没设min-width: 0—— flex item 默认min-width: auto，会撑满不收缩 - 用了
<pre><code>...</code></pre>嵌套，但只给code加样式，pre自带white-space: pre，会覆盖子元素设置 - 服务端模板（如 Jinja2）自动转义了 HTML，
<wbr>被输出成字面量<wbr></wbr>，根本没解析 - Safari iOS 12–13 需额外加
word-wrap: break-word（已废弃但仍有兼容价值）
要不要加？加在哪才有效
<wbr> 对 code 标签有用，但只在 white-space: pre-wrap 生效后起作用。它不是万能胶，只是告诉浏览器：“这里可以切”。插错位置等于白加：
立即学习“前端免费学习笔记（深入）”；
- URL 类：插在
/、.、@后，如https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>data - 驼峰变量：插在大写字母前，如
getUser<wbr>ById<wbr>Async - 避免插在纯小写串里，如
hello<wbr>world—— 浏览器根本不认这种“断点”
真正难的是语义判断：你得知道哪段是 URL、哪段是变量名、哪段是 base64，否则自动化注入容易切碎可读性。手动加只适合关键路径；批量处理建议走服务端过滤器，而非前端正则硬切。
