加min-width: 0是最快解法，因Flex子项默认min-width: auto阻止收缩，须配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis才能触发省略号。
Flex子项默认会阻止收缩，导致text-overflow: ellipsis不触发——加min-width: 0是最快解法。
Flex容器里文字不省略，根本原因是子项“不肯缩”
Flex布局中，子元素默认min-width: auto（不是0），哪怕你写了white-space: nowrap和overflow: hidden，浏览器仍认为“这行内容必须完整显示”，于是强行撑开容器，根本不会走到“溢出→裁剪→加省略号”的流程。
常见错误现象：
– 文字在Flex项里照常换行或撑宽父容器
– 开发者工具里看到text-overflow: ellipsis已生效，但页面毫无省略号
– 把同一段CSS挪到普通div里就立刻正常
- 只加
min-width: 0就能破局，不需要额外包裹一层 - 它比
overflow: hidden更直接：前者强制允许收缩，后者只是隐藏溢出 - 如果子项还带
flex: 1或flex-grow: 1，min-width: 0更是必须项
为什么不能只靠overflow: hidden？
overflow: hidden只管“溢出后怎么藏”，不管“会不会溢出”。而Flex子项的min-width: auto会让它优先保持内容宽度，哪怕内容远超容器可用空间。
换句话说：
– overflow: hidden 是“门关着”，
– min-width: 0 是“把门框变小”，逼内容真正撞上门。
- 单独加
overflow: hidden在Flex子项上基本无效 - 加
min-width: 0后，再配white-space: nowrap和text-overflow: ellipsis才能走通整条链路 - 某些旧版Safari需同时加
min-height: 0（仅当子项是Flex嵌套Flex时）
表格里也失效？那是另一回事
表格单元格失效不是因为min-width，而是table-layout默认为auto，列宽由内容撑开，text-overflow压根没机会计算“溢出”。这时要：
- 给
table加table-layout: fixed
- 给
td设明确width或max-width
- 再叠加
white-space: nowrap、overflow: hidden、text-overflow: ellipsis
别混用Flex和table的修复逻辑——它们失效的根本机制完全不同。
多行省略别指望text-overflow: ellipsis
这个属性天生只处理单行。想截两行或三行，得用-webkit-line-clamp，且它依赖display: -webkit-box，和Flex/Block共存时极易冲突。
容易被忽略的点：
– -webkit-line-clamp在非WebKit内核（如Firefox）需用JS fallback
– Flex容器里套-webkit-box可能触发渲染异常，建议外层用div隔离
– 长不可折字符串（如URL、base64）还需加overflow-wrap: break-word防撑破
表格单元格失效不是因为min-width，而是table-layout默认为auto，列宽由内容撑开，text-overflow压根没机会计算“溢出”。这时要：
- 给
table加table-layout: fixed - 给
td设明确width或max-width - 再叠加
white-space: nowrap、overflow: hidden、text-overflow: ellipsis
别混用Flex和table的修复逻辑——它们失效的根本机制完全不同。
多行省略别指望text-overflow: ellipsis
这个属性天生只处理单行。想截两行或三行，得用-webkit-line-clamp，且它依赖display: -webkit-box，和Flex/Block共存时极易冲突。
容易被忽略的点：
– -webkit-line-clamp在非WebKit内核（如Firefox）需用JS fallback
– Flex容器里套-webkit-box可能触发渲染异常，建议外层用div隔离
– 长不可折字符串（如URL、base64）还需加overflow-wrap: break-word防撑破
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
