Flex子项需设min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis才可截断；IE11不支持此组合，须外包块级元素；flex-wrap换行致高度不均时，优先用align-self: flex-start或改用Grid布局。
Flex容器里内容溢出不换行，怎么强制截断显示省略号
Flex布局默认不会触发text-overflow: ellipsis，因为该属性只对块级或内联块元素生效，而Flex子项在未显式设置white-space和overflow时，会脱离常规文档流，导致截断失效。
关键不是“用不用Flex”，而是子元素是否满足三要素：固定宽度（或受限宽度）、white-space: nowrap、overflow: hidden。Flex容器本身不提供这些，得手动加在子项上。
- 给需要截断的子元素设
flex: 0 1 auto（即不允许放大、允许缩小、基准尺寸由内容决定） - 必须加
min-width: 0或max-width: 100%——否则Flex子项会无视父容器约束，撑开自身宽度 - 再叠加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
示例：
.container {
display: flex;
}
.item {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Flex子项被压缩到看不见，为什么flex-shrink: 0也不管用
常见错觉是“设了flex-shrink: 0就一定不缩”，但实际还受min-width影响。浏览器会优先保证元素不小于其min-width（包括内容自然宽度），而Flex子项的默认min-width是auto，等效于内容最小宽度——如果内容是长单词或URL，它仍会被强行压缩甚至溢出容器。
立即学习“前端免费学习笔记（深入）”；
真正可控的方式是显式覆盖min-width：
- 设
min-width: 0（最常用，让子项可压缩至0） - 或设具体值如
min-width: 80px，避免过小失真 - 注意：
min-width: 0和overflow: hidden常成对出现，否则压缩后内容可能溢出不可见
IE11下Flex折叠内容显示异常，哪些CSS属性不兼容
IE11的Flex实现有硬伤：text-overflow: ellipsis在Flex子项中几乎无效，且min-width: 0支持不稳定。它会把min-width: 0当作min-width: auto处理，导致截断失败。
兼容方案只能绕开Flex截断逻辑：
- 外层用Flex布局，但需要截断的文本单独包一层
<div>，并设display: block - 该内层块级元素再应用标准截断三件套：
width: 100%、white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 避免在IE11中对Flex子项直接使用
text-overflow，哪怕加了min-width: 0也大概率失效
用flex-wrap: wrap替代折叠，但换行后高度不一致怎么办
当内容长度差异大，flex-wrap: wrap会导致多行高度参差——比如第一行一个长标题占两行，第二行三个短标签挤在一行，视觉割裂。
这不是Flex的问题，而是行高与内容基线没对齐：
- 给所有子项统一设
align-self: flex-start（避免默认stretch拉伸） - 用
line-height控制文字垂直居中，而非依赖padding或height - 若需严格等高，改用
display: grid配grid-template-rows: 1fr更可靠；Flex的align-content对单行无效，别指望它均分行高
Flex适合一维布局，强行用它解决二维对齐问题，往往比加几行Grid代码更费劲。
