code标签内长文本不换行是因为white-space默认为normal但等宽字体+无空格长串缺乏断点，且常被框架设为nowrap；应显式设white-space: pre-wrap并配合overflow-wrap: break-word、min-width: 0（flex容器中）及合理使用wbr。
为什么code标签里的长文本死活不换行
因为<code>默认继承white-space: normal，但浏览器会把它包裹在font-family: monospace里，而等宽字体+无空格长串（比如 Base64、URL、哈希值）天然缺乏断点，normal根本“看”不到可换行位置。更关键的是：很多框架或重置样式悄悄给<code>加了white-space: nowrap，直接锁死换行逻辑。
用white-space: pre-wrap保留格式并允许折行
这是最稳妥的解法——它既维持<code>应有的等宽字体和语义，又让换行符、空格、制表符生效，同时允许在容器边界自动折行。
- 必须显式声明：
white-space: pre-wrap（不能只靠继承） - 搭配
overflow-wrap: break-word处理超长无空格字符串（如https://example.com/very/long/path） - 避免用
word-break: break-all，它会把console.log切成conso+le.log，破坏可读性 - 如果
<code>在flex容器里，记得给它加min-width: 0，否则 flex 子项的默认min-width: auto会阻止折行
wbr在code里基本无效，别白费劲
<wbr>只在white-space: normal或pre-wrap下才可能被考虑，但<code>常被样式强制为nowrap，或者本身在pre上下文里（比如嵌套在<pre>中），此时<wbr>完全静音。即使生效，也只对语义断点有效：
- 插在 URL 的
/、.、@后，比如https://<wbr>api.<wbr>example.com</wbr></wbr> - 插在驼峰大写字母前，比如
getData<wbr>From<wbr>API</wbr></wbr> - 不要插在纯小写英文中间（
fetch<wbr>Data</wbr>错，fetch<wbr>Data</wbr>对）或数字串里（123456<wbr>789</wbr>无效）
完整 CSS 示例与避坑点
直接加到<code>或其父容器上：
立即学习“前端免费学习笔记（深入）”；
.code-block {
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: normal;
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
/* 如果父容器是 flex/grid，这行不能少 */
min-width: 0;
}⚠️ 注意：
- 别和
text-overflow: ellipsis混用——二者互斥，pre-wrap下省略号不会出现 - 服务端返回的 HTML 字符串若含
<code>，先做 HTML 实体转义，否则用户输入<script>可能触发 XSS - 移动端 Safari 对
pre-wrap支持稳定，但若配合flex: 1，仍需min-width: 0才能真正生效
最常被忽略的是min-width: 0和white-space的继承覆盖——这两个点没处理，其他样式全白配。
