根本原因是flex子项默认min-width: auto阻止收缩，必须显式设min-width: 0并配合overflow-wrap: break-word及父容器width/max-width约束才能触发换行。
flex子项文字换行失效，是因为min-width: auto锁死了收缩
Flex布局下文字不换行、容器被撑破，大概率不是文本本身问题，而是子项默认的min-width: auto在阻止收缩——它让浏览器认定“这个元素不能比内容还窄”，哪怕你写了width: 200px或flex: 1，只要内容没换行，整个项就拒绝变小。
解决方法很简单：给需要折行的文本容器加min-width: 0。
- 必须配合
overflow-wrap: break-word或word-break: break-all才有效——只设min-width: 0不会自动换行，只是解除了宽度下限 - 别写
min-width: 0 !important，优先用更具体的CSS选择器覆盖，避免污染其他逻辑 - 表格单元格、绝对定位元素里也适用，但需确认父级已形成BFC（比如
display: block或overflow: hidden）
white-space是换行开关，设成nowrap就等于关掉了所有断词逻辑
white-space决定浏览器是否允许换行，它是前置条件。如果它是nowrap、pre或从按钮/表格/Flex项继承而来，那后面配overflow-wrap: break-word也没用——根本不会触发断词计算。
用开发者工具查computed white-space值，确保是normal或pre-wrap。
-
white-space: normal：默认行为，空格合并、自动换行 -
white-space: pre-wrap：保留空格和换行符，同时允许自动折行（适合日志、代码块预览） - 千万别在卡片标题、列表项里全局设
white-space: nowrap，除非你明确要用text-overflow: ellipsis
padding和border挤占content box，导致换行阈值变小
设了width: 300px又加padding: 12px，实际内容区只剩276px。长单词或URL在这种缩窄后的宽度下更容易触发换行，甚至溢出——这不是bug，是box-sizing: content-box（默认）的必然结果。
统一用box-sizing: border-box，让width包含padding和border。
- 项目级建议：用
* { box-sizing: border-box }重置，但要检查是否有局部样式覆盖成content-box -
box-sizing不影响margin，它始终在盒子外部，不用额外处理 - 对
<img>这类替换元素，box-sizing无效，得靠max-width: 100%+height: auto控制
overflow-wrap: break-word不是“自动换行”，它只在宽度不足时才切词
overflow-wrap: break-word的作用很具体：当一个**完整单词**放不下当前可用宽度时，才把它断开。如果容器没显式宽度（比如Flex子项没设min-width或max-width），浏览器会认为“还有空间”，压根不走断词逻辑。
必须给文本容器加宽度约束：
-
max-width: 100%（响应式首选） -
max-width: 300px（固定场景） - Flex布局中，搭配
flex: 1时，min-width: 0比width更可靠 - 表格中生效需配合
table-layout: fixed+ 显式width，否则宽度由内容撑开
最常被忽略的是：换行行为依赖于「可用宽度」的计算，而这个宽度受父容器BFC、浮动塌陷、Flex收缩规则共同影响——单改一个属性往往不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
