根本原因是Flex子项默认min-width: auto，必须在文字所在具体元素上显式设min-width: 0，再配合overflow-wrap: break-word（优先）或word-break: break-all（兜底），并确保无white-space: nowrap干扰。
flex容器里长文本不换行，根本不是overflow-wrap没生效
根本原因是Flex子项默认min-width: auto，它把整段无空格内容（比如https://example.com/very-long-path）当成不可压缩单元。哪怕你写了overflow-wrap: break-word，浏览器也压根不会触发断行逻辑——它先判定“这串东西不能缩”，然后直接撑宽容器或引发横向滚动。
必须显式在**文字所在的具体元素**上加min-width: 0，而不是父容器或按钮外框。用DevTools检查computed样式，确认min-width值是0px，不是auto。
- 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，务必显式写 - 如果子元素是
或，很多UI框架会全局设white-space: nowrap，它会直接覆盖所有换行行为 - 移动端Safari遇到
transform: translateZ(0)或will-change时，可能意外禁用换行渲染——临时移除测试即可定位
该选overflow-wrap: break-word还是word-break: break-all
overflow-wrap: break-word更安全：它只在整词放不下当前行时才断开，保留可读性；word-break: break-all会在任意字符间硬切，比如把user@example.com切成user@exa…，破坏复制体验和语义。
但对纯技术内容（如Base64、哈希、无空格URL），word-break: break-all反而更可靠——overflow-wrap: break-word在某些极端长度下仍可能拒绝断行。
- 兼容IE/旧Safari：补
word-wrap: break-word（与overflow-wrap效果一致） - 慎用
overflow-wrap: anywhere：iOS 15.4之前不支持，且太激进，连hello都可能被切成hel-lo - 绝对不要同时写
white-space: nowrap——它和任何换行策略冲突
flex: 1和换行冲突时怎么解
当子项设了flex: 1，它会拉伸占满剩余空间，但拉伸后仍因min-width: auto拒绝收缩，导致换行失效。
两个有效方案：
- 保留
flex: 1，叠加min-width: 0 - 改用
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），让基础尺寸为0，释放收缩能力
注意：flex: 1等价于flex: 1 1 0仅在现代浏览器中成立；IE11下需显式写全，否则flex-basis会被忽略，换行仍失效。
响应式场景下容易被忽略的继承陷阱
很多UI框架或全局样式会给button、a等元素设white-space: nowrap，这个声明优先级高、作用范围广，极易覆盖你局部写的overflow-wrap。
解决办法不是靠!important硬顶，而是精准定位到文字容器本身（比如.task-title span），并在其上重置white-space: normal并配min-width: 0。
另外，flex-wrap: wrap只控制子项是否换行，不解决单个子项内文本溢出——它和overflow-wrap是协作关系，不是替代关系。漏掉任何一个，窄屏下都可能突然崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
