Flex子项不换行的主因是min-width: auto，必须显式设min-width: 0；overflow-wrap: break-word需配合宽度约束、非nowrap及块级上下文才生效。
必须显式设 min-width: 0，否则再配什么断行属性都白搭——这是 Flex/Grid 容器里长单词撑破布局的头号原因。
Flex 子项不换行？先查 min-width 计算值
浏览器默认给 Flex 子项加 min-width: auto，意思是“至少得容下最长那个单词”，它会死扛不缩，宁可把整个卡片拉宽也不换行。这不是 bug，是规范行为。
- 用 DevTools 的 Computed 面板搜
min-width，确认值真是0px，别靠肉眼猜 - 必须加在 Flex 容器的直接子元素上（比如卡片里的
<p>或<div class="content">），嵌套一层就无效 - 如果该子项还写了
flex-shrink: 0，min-width: 0会被忽略，得先删掉 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，一律显式写
overflow-wrap: break-word 单独写一定无效
它不是“开启换行”的开关，而是“兜底许可”：只有当浏览器确认当前行放不下整个单词时，才允许切开。这个判断依赖三个硬性前提：
- 父容器有明确宽度约束：
width、max-width或受外层限制（比如max-width: 100%） - 目标元素没被
white-space: nowrap锁死（常见于按钮、表格单元格、UI 框架组件） - 元素自身是块级或已通过
display: block/inline-block转为可换行上下文
漏一个，overflow-wrap: break-word 就等于没写。
立即学习“前端免费学习笔记（深入）”；
中英文混排 + 长技术串，怎么配才不翻车
纯中文能自然断字，但夹着 https://example.com/verylongpath 或 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 这类串时，overflow-wrap: break-word 可能仍不触发——因为它们中间没有斜杠、点号等自然断点。
- 优先组合写：
overflow-wrap: break-word; word-break: break-all;，前者保日常语义，后者兜底暴力断 - 别用
word-break: break-word——它早在 Chrome 早期就被废弃，现代浏览器不保证识别 - 移动端要双写兼容：
word-wrap: break-word;（iOS 11 及更早） +overflow-wrap: break-word; - 表格里必须配
table-layout: fixed+ 显式列宽（如td { width: 200px; }），否则所有断行规则都被忽略
<pre>、<code>、<input> 这些元素怎么办
它们有自己的一套渲染逻辑，overflow-wrap 和 word-break 基本无效。
-
<input type="text">：无法自动换行，只能靠width+overflow: hidden截断，或换用<textarea> -
<textarea>：默认支持换行，但需加resize: none防拖大，并用width/max-width约束 -
<pre>和<code>：默认white-space: pre，必须重置为white-space: pre-wrap或normal才能配合断行属性
真正卡住换行的，往往不是哪一行 CSS 写错了，而是 min-width 没真变成 0px，或者容器宽度根本没被约束住——查 computed 值比盯代码快得多。
