flex容器中text-overflow: ellipsis不生效需同时满足：文本元素设overflow: hidden、white-space: nowrap、text-overflow: ellipsis，并加min-width: 0（或flex-shrink: 1）以允许收缩；多行省略在flex中不可靠，建议JS实现；IE11需用max-width兜底。
flex容器里text-overflow: ellipsis不生效？先检查white-space和overflow
这是最常见原因：flex子项默认是white-space: normal，且未显式设置overflow: hidden，导致省略号根本不会触发。flex本身不改变文本截断逻辑，但它会干扰父级约束——尤其是当子项没被“压住宽度”时。
必须同时满足三个条件：overflow: hidden、white-space: nowrap、text-overflow: ellipsis。缺一不可，且要加在**文本所在元素上**（不是flex容器）。
-
display: flex的父容器不用加overflow，加了反而可能遮住内容或引发滚动条 - 文本元素（比如
<span>或<p>）必须设overflow: hidden，否则浏览器认为“有空间可撑开” - 如果文本元素是
flex子项，还要确保它不被flex-grow无限拉伸——加flex-shrink: 1或min-width: 0（见下一条）
flex-shrink: 0或min-width: 0——flex子项不肯收缩怎么办
flex子项默认flex-shrink: 1，但某些情况下（比如内部有inline内容或未重置min-width），它会拒绝压缩到小于内容自然宽度，导致text-overflow失效。
解决方案不是强行设width，而是让子项“允许缩到0”：
立即学习“前端免费学习笔记（深入）”；
- 给文本容器加
min-width: 0（推荐，兼容性好，Chrome/Firefox/Edge均支持） - 或者设
flex-shrink: 1（如果原本是0） - 避免用
width: 100%去“撑满”，这在flex里常和flex-basis冲突，反而卡死宽度计算
示例关键样式：
.item {
display: flex;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* 这行最关键 */
}
多行省略在flex里为什么更难？别碰display: -webkit-box
flex布局下实现多行省略（比如两行后截断加...）几乎无法靠纯CSS可靠完成。因为line-clamp依赖块级上下文，而flex子项的行高、对齐、基线等行为会干扰-webkit-line-clamp的行数计算。
真实项目中建议绕过：
- 放弃CSS多行省略，改用JS方案（如
clamp.js或react-lines-ellipsis），控制更稳 - 如果必须用CSS，把文本抽离出flex流：用
position: absolute或grid替代部分flex结构 -
display: -webkit-box+-webkit-line-clamp在flex子项里表现极不稳定，Safari偶现截断错位，Chrome可能完全不生效
IE11下text-overflow: ellipsis在flex中彻底失效？加max-width兜底
IE11对flex + ellipsis的支持存在已知bug：即使满足所有条件，仍可能不显示省略号。根本原因是IE11的flex宽度计算异常，导致text-overflow判定失败。
临时解法是放弃“自适应”，给文本容器加明确的max-width：
- 用
max-width: calc(100% - 60px)之类动态值（减去旁边图标/按钮宽度） - 或结合
@supports (display: flex)做渐进增强，IE里降级为固定width - 注意：IE11不支持
min-width: 0在flex子项上的效果，所以这里max-width是唯一可控变量
复杂点在于，不同浏览器对“flex子项是否参与文本溢出检测”的实现不一致——Chrome严格，Firefox宽松，IE11基本不认。实际调试时，优先在Chrome里验证基础逻辑，再单独适配IE。
