text-overflow: ellipsis必须配合width或max-width，因为它不决定截断位置，仅定义截断后显示省略号；浏览器需明确宽度边界才能触发overflow: hidden的裁剪逻辑。
text-overflow: ellipsis 为什么必须有 width 或 max-width
它本身不决定“在哪截断”，只负责“截断后画三个点”。浏览器需要明确的裁剪边界才能触发截断逻辑——这个边界来自盒模型的 width 或 max-width。没有它们，overflow: hidden 就像一扇没框的门，根本不知道该挡哪儿。
常见错误现象：
- 父容器用
display: flex，子元素写了text-overflow: ellipsis却换行或撑宽 - 子元素设了
width: 100%，但父容器宽度由内容撑开，实际无约束 - 用了
min-width: fit-content或auto，导致内容优先撑开容器
实操建议：
-
width必须是确定值：像素、百分比（父级有固定宽）、max-content等可计算值 - 避免依赖
flex-basis: auto或未设min-width的 flex 项——它们默认min-width: auto，会锁死最小宽度 - 用 Chrome DevTools 的 Layout 面板检查 computed
width和min-width，确认是否真被限制住
Flex 容器里 text-overflow 失效的根源在 min-width: auto
Flex 子项默认 min-width: auto，意思是“至少要容下所有内联内容”。哪怕你写了 white-space: nowrap 和 overflow: hidden，浏览器也优先按文字长度撑开宽度，压根不走溢出流程。
立即学习“前端免费学习笔记（深入）”；
必须显式覆盖这个行为：
- 加
min-width: 0—— 这是关键，不是可选项 - 配合
flex-shrink: 1（或flex: 1），让子项能收缩 - 仍需
white-space: nowrap+overflow: hidden+ 明确width或max-width
示例有效写法：
.flex-item {
min-width: 0;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
多行省略不能靠 text-overflow: ellipsis 解决
text-overflow: ellipsis 是单行专属，它和 white-space: nowrap 绑定，后者直接禁掉换行。想截两行或三行，得换方案。
主流兼容做法仍是 WebKit 私有属性组合：
- 必须用
display: -webkit-box，不是flex或block - 必须写
-webkit-box-orient: vertical，否则-webkit-line-clamp不生效 - 必须配
overflow: hidden，否则溢出内容仍可见 -
-webkit-line-clamp值为整数（如2），表示最多显示几行
注意 Firefox 68+ 支持 -webkit-line-clamp，但不支持 display: -webkit-box 的某些变体——稳妥起见，别混用其他 display 值。
盒模型尺寸错位会让 overflow: hidden 形同虚设
overflow: hidden 裁剪的是 content box + padding + border 区域。如果 box-sizing 是默认的 content-box，而你又设了大 padding 或 border，实际可用内容宽度可能远小于设定的 width，导致文字提前溢出却没被裁。
排查要点：
- 检查
box-sizing：推荐统一设为border-box，让width包含 padding 和 border - 确认
padding和border没意外撑大容器——尤其嵌套 flex 或 grid 时容易忽略 - 用 DevTools 的 Box Model 面板看 computed width、padding、border 是否符合预期
最常被忽略的其实是父容器的盒模型：它没设 width，子元素的 100% 就无效；它用了 display: inline-block 却没设 vertical-align，导致高度塌陷进而影响 max-height 截断。
