根本原因是flex子项默认min-width:auto阻止收缩，必须显式设置min-width:0（或width:0），并配合white-space:nowrap、overflow:hidden和块级显示才能触发text-overflow:ellipsis。
为什么 flex 里 white-space: nowrap + text-overflow: ellipsis 不生效
根本原因不是属性写错了，而是 flex 子项默认的 min-width: auto 在作祟。当文本被强制不换行（white-space: nowrap），浏览器会按完整文本宽度计算其“最小内容宽”，导致该子项拒绝收缩——哪怕父容器空间不足，overflow: hidden 也裁不掉内容，text-overflow: ellipsis 自然失效。
必须加 min-width: 0 或 width: 0
这是最直接、兼容性最好的修复动作，作用是覆盖默认的 min-width: auto，允许 flex 子项真正收缩到内容之外。
-
min-width: 0是标准写法，适用于绝大多数场景 - 某些安卓 Webview（尤其旧版）对
min-width: 0支持不稳定，可改用width: 0+flex: 1组合，效果更可靠 - 不要只写
overflow: hidden—— 它没用，除非收缩机制被激活
flex: 1 元素上怎么写才稳妥
常见错误是只给容器设 flex: 1，却忘了约束内部文本元素的收缩能力。正确做法是把关键样式落到 *那个要省略的文本元素本身* 上：
- 确保该元素有明确宽度上下文：比如父级是
display: flex，它自己设flex: 1或width: 100% - 在该元素上同时设置：
min-width: 0、overflow: hidden、white-space: nowrap、text-overflow: ellipsis - 避免在它上面用
display: inline或未声明display—— 必须是块级或 inline-block 才能响应这些属性
别误用 -webkit-line-clamp 当单行方案
虽然 display: -webkit-box + -webkit-line-clamp: 1 看似能“曲线救国”，但它本质是多行截断逻辑，依赖 -webkit-box-orient: vertical，和 white-space: nowrap 冲突。实际中容易出现：
- 文字意外换行（尤其在 Safari 或部分 Android 浏览器）
- 省略号位置偏移或不显示
- 与 flex 布局其他属性（如
align-items）产生不可预测的交互
真要用，只在明确需要兼容极老环境且已放弃 min-width: 0 方案时才考虑，否则纯属增加不确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
