text-overflow: ellipsis 必须与 overflow: hidden、white-space: nowrap 及明确宽度（width/max-width）同时设置才生效；缺一不可，且仅支持单行省略，多行需用 -webkit-line-clamp。
text-overflow: ellipsis 必须和 overflow: hidden 同时设置
单独写 text-overflow: ellipsis 不会生效，它依赖 overflow 的隐藏行为来触发省略逻辑。如果 overflow 是 visible（默认值）或 auto（在无滚动需求时可能不创建剪裁上下文），省略号就完全不会出现。
常见错误现象：文字溢出但没省略号，检查 computed styles 会发现 overflow 实际计算值仍是 visible；或者用了 overflow: auto 但容器没内容高度变化，浏览器未激活剪裁区域。
-
overflow: hidden是最稳妥的选择，明确告诉浏览器“裁掉超出部分” -
overflow: scroll或auto理论上也能触发，但会附带滚动条，UI 上通常不可接受 - 别把
overflow写在父容器上——必须作用于**文本所在元素本身**
white-space: nowrap 是单行省略的硬性前提
text-overflow 只对“无法换行的单行内联流”起作用。如果没有 white-space: nowrap，浏览器会优先折行，根本不会进入“溢出判断”流程。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: normal或pre-wrap时，即使宽度固定、overflow: hidden和text-overflow: ellipsis都写了，也无效 - 某些重置样式（如 normalize.css）可能默认设了
white-space: normal，需显式覆盖 - 表格单元格（
td）里直接加这三属性有时不生效，得额外加table-layout: fixed
容器必须有明确宽度约束
text-overflow 不是靠“内容撑开再裁剪”，而是靠“先定宽、再塞内容、再判断是否溢出”。如果宽度是 auto（比如未设 width/max-width，且父容器也没给约束），浏览器无法确定“哪里算溢出”，整个机制就瘫痪。
可用的宽度设定方式：
-
width: 200px、max-width: 80%、width: 30vw都行 - Flex 或 Grid 子项中，若父容器用了
flex: 1或grid-template-columns: 1fr，子项仍需自身设min-width: 0（防止 flex item 默认不收缩导致宽度失控） - 绝对定位元素要小心：若没设
left/right或width，其宽度可能退化为内容宽度，text-overflow失效
多行省略只能靠 -webkit-line-clamp，且 Firefox 不支持
原生 text-overflow 仅支持单行。想实现两行或三行后加省略号，目前唯一稳定方案是：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
这个组合只在 WebKit/Blink 内核（Chrome、Safari、Edge 新版、大部分安卓 WebView）有效。Firefox 完全忽略 -webkit-line-clamp，渲染为完整多行——这点必须提前设计降级策略，比如用 JS 检测并 fallback 到截断字符 + 手动加 …。
注意：-webkit-line-clamp 的行数计算基于 line-height 和容器 height，若两者不匹配（比如 line-height: 1.6 但 height: 40px），可能出现截半行或空行。
