text-overflow: ellipsis在flex中不生效是因为flex子项默认min-width: auto阻止收缩，需同时满足min-width: 0、flex: 1 1 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis五点；长url等无空格文本还需overflow-wrap: break-word配合max-width和min-width: 0。
为什么text-overflow: ellipsis在Flex里不生效
根本不是text-overflow失效，而是它压根没机会触发——Flex子项默认min-width: auto，浏览器会优先保全文本完整显示，哪怕撑破容器也不裁剪。你看到文字溢出，其实是flex收缩逻辑被锁死了。
必须同时满足这五点，省略号才可能画出来：
-
min-width: 0加在目标文本元素上（不是父容器） -
flex: 1 1 0（注意是数字0，不是0%；flex: 1等价于flex: 1 1 0%，容易导致宽度计算异常） -
white-space: nowrap（必须写在同一元素，不能靠继承） -
overflow: hidden（裁剪动作本身） -
text-overflow: ellipsis（只负责渲染省略号，不控制行为）
Flex子项被长URL或英文单词撑开怎么办
即使配齐上面五条，https://example.com/very-long-path这类无空格字符串仍会撑开——因为浏览器默认不拆分单词。这时overflow-wrap: break-word才真正起作用，但它有个前提：容器得先被允许压缩。
所以顺序不能错：
- 先加
min-width: 0解锁收缩权限 - 再加
max-width: 100%或具体值（比如max-width: 300px），给换行提供参照宽度 - 最后加
overflow-wrap: break-word（旧名word-wrap: break-word仍可兼容） - 避免和
word-break: break-all混用——后者会在任意字符间切分，破坏可读性
移动端和Safari特别容易翻车的点
移动端小屏下，min-width: 0必须配合max-width: 100%，否则flex子项在flex-direction: column里仍可能水平溢出。Safari旧版本对flex-basis: 0解析有偏差，必要时补一句flex-basis: 0%兜底。
常见漏点：
- 父容器没设
width或max-width——容器宽度无限，就不存在“溢出” -
overflow: hidden加在外层wrapper，但实际溢出发生在内层<p></p>上 - 误把
flex-shrink: 0加在文本项上——它直接拒绝压缩，所有截断规则失效
调试时最该盯住的三个computed值
打开DevTools，直接看Computed面板，重点确认：
- 目标元素的
min-width是否真为0px（不是auto，也不是0%） -
flex-basis是否稳定为0px（flex: 1 1 0应推导出这个值） -
white-space是否为nowrap（不是normal或pre，尤其注意表格单元格、按钮等默认值）
这些值不对，代码写得再全也没用——Flex里的文字溢出，本质是尺寸计算链上的某个环节被默认值卡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
