必须显式设置min-width: 0解除flex子项默认的min-width: auto锁定，否则overflow-wrap: break-word或word-break: break-all均无法触发换行；该值须加在文字所在直接子元素上，并配合父容器宽度约束及white-space: normal等规则。
Flex容器里长文本不换行，不是因为你没写overflow-wrap: break-word，而是min-width: auto锁死了子项收缩能力——必须先解除这个默认限制，再配合适当的换行策略。
为什么word-break: break-all在flex子项里经常失效
因为Flex项目默认min-width: auto，浏览器会把整段无空格内容（比如https://example.com/very-long-path）当成不可压缩单元。哪怕你写了word-break: break-all，它也根本没机会触发断行逻辑，直接撑宽容器或引发横向滚动。
- 错误做法：只给父容器设
display: flex，却没在含文本的子元素上加min-width: 0 - 正确位置：必须加在**文字所在的具体元素**上，比如
.task-title或.btn-text，不是按钮本身或外层容器 - 检查方式：用DevTools看computed样式，确认
min-width值是0px，不是auto - 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，建议显式写
该选overflow-wrap: break-word还是word-break: break-all
overflow-wrap: break-word更安全，它只在整词放不下当前行时才断开；word-break: break-all会在任意字符间硬切，破坏可读性和复制体验（比如把邮箱user@example.com切成user@exa…）。
- 推荐组合：
min-width: 0; overflow-wrap: break-word; - 降级兼容：加
word-wrap: break-word;（IE/旧Safari）和-webkit-hyphens: auto;（辅助英文断字） - 慎用
overflow-wrap: anywhere：iOS 15.4之前不支持，且太激进，连hello都可能被切成hel-lo - 绝对不要同时写
white-space: nowrap——它会直接覆盖所有换行行为
Flex多列布局中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，释放收缩能力 - 移动端Safari要注意：如果父容器有
transform（如translateZ(0)）或will-change，可能意外禁用换行渲染——遇到时先临时移除测试 - 若父容器是
flex-direction: column，换行问题实际是高度控制问题，应关注max-height+overflow组合
响应式场景下容易被忽略的继承陷阱
很多UI框架或全局样式会给button、a等元素设white-space: nowrap，它比overflow-wrap优先级更高，会直接锁死换行。
- 排查方法：用DevTools检查computed样式里的
white-space值，确认不是nowrap - 修复方式：在文字元素上显式重置，比如
.btn-text { white-space: normal; } - 媒体查询中别漏掉：桌面端用
nowrap保持紧凑，小屏必须在@media (max-width: 768px)里补上white-space: normal - 真正难调试的是iOS上
text-overflow: ellipsis和overflow-wrap共存时的渲染滞后——建议降级用overflow: hidden兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
