code标签默认不换行因其为内联元素且浏览器设white-space: nowrap，防止代码折断；解决需用white-space: pre-wrap配合word-break和overflow-wrap，并注意flex容器中min-width: auto的影响。
为什么 code 标签默认不换行
code 是内联元素，浏览器默认设了 white-space: nowrap（尤其在 Chrome/Firefox 中），目的是防止代码被意外折断。哪怕容器很窄，它也会横向溢出或拉宽父容器，而不是换行。
常见错误现象：
- 一段长 JSON 或 URL 塞进
标签后，整行撑破布局，出现横向滚动条 - 在响应式卡片里，
内容把卡片宽度顶开，破坏栅格 - 使用
wrap="soft"—— 这个属性只对
code 标签加 overflow-wrap: break-word 不生效？检查这三点
overflow-wrap: break-word 单独加在 code 上常常没反应，原因通常是：
- 容器没有设置明确的
width或max-width（比如父元素是display: flex且未限宽） - 父元素或自身继承了
white-space: nowrap（来自 Bootstrap 的.text-nowrap、Ant Design 的typography组件等） -
code被包裹在pre里，而pre默认是white-space: pre，会彻底压制换行逻辑
实操建议：
- 直接给
code加white-space: pre-wrap，它比overflow-wrap更可靠（保留原始换行符 + 允许自动折行） - 同时补上
word-break: break-word（旧 Safari 兼容）和overflow-wrap: break-word（现代标准） - 若嵌套在
pre中，改用pre code { white-space: pre-wrap; }覆盖默认行为
真正能用的最小可行样式组合
以下这段 CSS 可直接复用，适配绝大多数场景（包括移动端 Safari）：
.code-wrap {
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
然后这样用：
<code class="code-wrap">fetch('https://api.example.com/v1/users?include=profile,permissions,settings').then(r => r.json())</code>
注意点：
- 不要依赖
display: block来“让它换行”——code换行关键不在显示类型，而在空白处理策略 - 避免同时设
white-space: pre和overflow-wrap，二者冲突，后者会被忽略 - 如果内容来自用户输入（含 \n），
white-space: pre-wrap会原样渲染那些换行；若不需要，先用 JS 清洗或改用white-space: normal
Flex/Grid 容器里 code 死活不换行？看 min-width
在 display: flex 的卡片或列表项中，即使写了上面所有样式，code 仍可能拒绝折行——这是 flex item 默认 min-width: auto 在作怪。
修复方式很简单，任选其一：
- 给
code加min-width: 0 - 给它的父 flex item 加
min-width: 0 - 改用
flex: 1替代flex: none或未声明 flex 缩放行为
最常被忽略的是：这个 min-width: auto 行为在 Safari 14+ 和 Chrome 90+ 才统一，老版本表现不一致，所以线上遇到“部分机型不换行”，优先查这里。
复杂点在于，你得同时盯住三层：CSS 白空格策略、容器宽度约束、Flex/Grid 的收缩规则——少一个，code 就照旧横着跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
