Flex子项长英文不换行，根本原因是默认min-width: auto锁定收缩，必须同步设min-width: 0、max-width和white-space: normal，并按语义搭配overflow-wrap: break-word（主逻辑）与word-break: break-all（兜底）。
Flex容器里写了 overflow-wrap: break-word 却不换行，不是属性写错了，而是浏览器压根没走到换行逻辑——它先把你整个容器撑开了。
为什么flex子项的长英文死活不换行
根本原因是 flex 直接子项默认带 min-width: auto（等价于 min-width: fit-content），它会把一整串无空格的英文（比如 https://api.example.com/v1/abc123def456）当成不可分割的整体，宁可拉宽父容器，也不缩自己换行。
- 这个
min-width: auto是隐式行为，在 DevTools 的「Computed」里看不到，但真实生效 - 它只对
display: flex的**直接子元素**起作用，套一层div就失效 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写 - 如果子项还设了
flex-shrink: 0，min-width: 0直接被忽略
必须加的三件套：min-width: 0 + max-width + white-space
单独写 overflow-wrap: break-word 基本无效，必须同时满足三个条件：
-
min-width: 0（或现代写法min-inline-size: 0）——解除 flex 子项的最小宽度锁定 -
max-width: 100%或具体值（如max-width: 300px）——给浏览器明确“一行有多宽” -
white-space: normal——不能依赖继承，必须显式声明，否则可能被祖先的nowrap抑制
示例：
div.card-title {
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: break-word;
}
overflow-wrap vs word-break：按内容语义选
这不是二选一，而是分层处理：
-
overflow-wrap: break-word是主逻辑：只在整词放不下时才断，适合用户可见内容（如邮箱、带连字符的路径），不会把filename.pdf切在点号前 -
word-break: break-all是兜底：对 base64、哈希、API 路径这类“根本不算单词”的字符串才启用，但它会把helloWorld拆成hell和oWorld，所以只加在明确类名上（如.token-value） - 别用
word-break: break-word——已废弃，现代浏览器不保证支持
稳妥写法（按需组合）：
.log-id {
overflow-wrap: break-word;
word-break: break-all;
}
中英文混排时的隐藏陷阱
中文本身每个字都是天然断点，浏览器看到中文段落，就判定“已有断点”，跳过对夹着的英文长串（如“下载 verylongfilename.pdf”）的兜底检查。
- 此时单靠
overflow-wrap: break-word不够，得补word-break: keep-all（禁中文内断）+overflow-wrap: break-word（保英文兜底） - iOS 12 以下不支持
keep-all，需补-webkit-word-break: keep-all - 若内容含
标签，记得单独重置：code { word-break: break-all; }，否则 monospace 字体下overflow-wrap基本无效
最常被忽略的是嵌套 flex 场景：如果文字容器内部又套了一层 display: flex（比如头像+文字并排），那文字块本身也得单独加 min-width: 0——flex 的收缩锁是逐层生效的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
