code标签默认不换行是因为white-space: nowrap强制禁止折行；必须显式设white-space: pre-wrap才能既保留换行符又允许自动断行，其他值如normal或pre均不适用。
为什么标签默认不换行
code 是内联元素，浏览器默认设了 <code>white-space: nowrap，哪怕容器窄到只剩 10px，它也拒绝折行——不是“不想”，是 CSS 明确禁止。你加 max-width、overflow-wrap: break-word 全无效，因为 white-space: nowrap 的优先级更高，直接封死了所有换行路径。
让code折行必须覆盖 white-space
只改一个属性：显式设 white-space: pre-wrap。它保留原始空格和换行符（比如你写 <code>foo<br>bar 中的 <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 class="brush:php;toolbar:false;"><code>...</code></pre>嵌套，但只给code加样式，pre自带white-space: pre，会覆盖子元素设置 - 服务端模板（如 Jinja2）自动转义了 HTML，
<wbr></wbr>被输出成字面量<wbr>，根本没解析 - Safari iOS 12–13 需额外加
word-wrap: break-word（已废弃但仍有兼容价值）
要不要加？加在哪才有效
<wbr></wbr> 对 code 标签有用，但只在 white-space: pre-wrap 生效后起作用。它不是万能胶，只是告诉浏览器：“这里可以切”。插错位置等于白加：
- URL 类：插在
/、.、@后，如https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>data</wbr></wbr></wbr></wbr></wbr> - 驼峰变量：插在大写字母前，如
getUser<wbr>ById<wbr>Async</wbr></wbr> - 避免插在纯小写串里，如
hello<wbr>world</wbr>—— 浏览器根本不认这种“断点”
真正难的是语义判断：你得知道哪段是 URL、哪段是变量名、哪段是 base64，否则自动化注入容易切碎可读性。手动加只适合关键路径；批量处理建议走服务端过滤器，而非前端正则硬切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
