text-overflow: ellipsis 仅在文本被真实截断时生效，单行省略需同时满足 width/max-width、overflow: hidden、white-space: nowrap、text-overflow: ellipsis 四条件；Flex 项需加 min-width: 0；多行省略依赖 -webkit-line-clamp 三件套且仅 WebKit 支持；表格中需 table-layout: fixed 及 td 显式宽限。
text-overflow: ellipsis 不是加了就生效的“装饰”，它只在文本被真实截断时才亮起。漏掉任意一个前提条件，省略号就永远不会出现。
单行省略必须配齐的四条 CSS 规则
缺一不可，顺序无关，但少一条都不行：
-
width或max-width：必须是明确值（如200px、80%），flex: 1或100%在 flex 容器中可能不触发截断 -
overflow: hidden：不能是visible（默认）、auto（滚动行为不稳定）或scroll（会显示滚动条） -
white-space: nowrap：最常被跳过；normal、pre-wrap下完全无效 -
text-overflow: ellipsis：此时才真正启用
典型写法：
.ellipsis {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Flex 容器里 text-overflow 失效怎么办
Flex 子项默认 min-width: auto，会强行撑开宽度容纳全部文字，导致 overflow: hidden 形同虚设。
立即学习“前端免费学习笔记（深入）”；
解决方法只有一条：min-width: 0 —— 它覆盖 flex 默认行为，让宽度约束真正生效。
完整组合：
.flex-item {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
如果同时用了 flex: 1，建议补上 width: 0，避免某些浏览器计算偏差。
多行省略用 -webkit-line-clamp 的兼容性陷阱
这个方案只在 WebKit 内核浏览器（Chrome、Safari、新版 Edge、主流安卓/iOS WebView）中有效，Firefox 和旧 IE 完全不支持。
必须三件套共存，漏一不可：
display: -webkit-box-webkit-box-orient: vertical-
-webkit-line-clamp: 2（整数，不能是calc()或 CSS 变量）
且仍要保留 overflow: hidden，否则不截断。
示例：
.ellipsis-2lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：height 不建议硬设，推荐用 line-height × 行数 + 一点余量；含 inline-block 元素或图标时容易错位。
表格单元格（<td>）里加省略号的特殊要求
表格默认是 display: table-cell，其宽度计算逻辑和普通块元素不同，text-overflow 更容易失效。
关键点有三个：
- 父
<table>必须设table-layout: fixed，否则列宽由内容决定，无法约束 -
<td>需显式设置width或max-width（如max-width: 150px） - 仍需
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
常见写法：
table { table-layout: fixed; }
td {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
如果内容含中文，可加 word-break: keep-all 防止在字中间断行，但不是必需。
真正容易被忽略的是：所有这些规则都依赖「文本在渲染时已被强制限制在单行+固定宽度」这个前提。一旦布局流被其他样式（比如 float、position: absolute、未重置的 min-width）干扰，省略号就会静默失效——它不会报错，只是不出现。
