text-overflow: ellipsis不生效是因为未同时满足三个条件：white-space: nowrap、overflow: hidden、容器有明确宽度（如width或max-width）；Flex布局中还需额外添加min-width: 0。
text-overflow: ellipsis 只对单行有效，多行必须用 -webkit-line-clamp，但后者不是所有浏览器都认——别指望一套 CSS 通吃。
单行省略为什么加了 text-overflow: ellipsis 还不生效？
它本身不干活，只是“说清楚溢出时怎么显示”，真正起作用的是三个条件必须同时满足：
-
white-space: nowrap：强制不换行，否则文本直接下移，根本没机会溢出 -
overflow: hidden：创建裁剪边界，没它文字就撑出去了 - 容器有明确宽度：比如
width、max-width，甚至flex-basis或inline-size；100%也行，但父级不能是width: auto且无约束的 flex item
常见错误：在 Flex 容器里给子元素设 width: 100%，结果无效——因为 flex item 默认 min-width: auto，会阻止宽度收缩。解决方法是加 min-width: 0。
多行省略用 -webkit-line-clamp 为啥有时没反应？
这套组合不是“写了就灵”，漏掉任意一环都会失败：
立即学习“前端免费学习笔记（深入）”；
- 必须写
display: -webkit-box，不能用flex或block -
-webkit-box-orient: vertical必须显式声明，漏掉就变成横向截断 -
-webkit-line-clamp: 2的值只能是整数，不能是变量或小数 -
overflow: hidden不能少，否则省略号压根不出现
Firefox 和旧版 Edge 完全不支持 -webkit-line-clamp；Chrome/Safari/新版 Edge 支持良好。别把它和 text-overflow: ellipsis 混用——后者对多行实际无效，纯属冗余。
Flex/Grid 里单行省略失效怎么调？
每层 flex 或 grid 都可能重置 min-width，导致宽度约束被绕过：
- Flex item 加
min-width: 0（或min-inline-size: 0） - Grid item 若列宽设为
1fr，子元素仍需显式设width: 0或配合overflow组合才可靠 - 嵌套多层 flex 容器时，建议用 devtools 查 computed
width，确认是否真被限制住了
表格中失效？加 table-layout: fixed 并给 td 设 width。
多行省略的高度怎么估？
它按“行数”截，不是按像素高度截：
- 假设
line-height: 1.5em，要显示 3 行，就得手动设height: 4.5em（或类似估算值） - 字体差异、系统缩放、字体替换都会影响实际行高：同一段文字，在 macOS 上可能占 3 行，Windows 上占 4 行
- 别依赖纯 CSS 做精确高度控制，留点余量比卡死更稳妥
最麻烦的其实是行高浮动——你写的 line-height: 1.5 在不同环境里真不一定等于 1.5 倍字号，这点容易被忽略，但直接影响截断位置是否准确。
