text-overflow: ellipsis生效需同时满足五个条件：white-space: nowrap、overflow:hidden（或scroll/auto）、设定width/max-width、父元素非inline显示、display非table-cell（如td需额外处理）；IE9需加-ms-text-overflow；多行省略无可靠纯CSS方案。
不兼容是常态，兼容靠组合条件——text-overflow: ellipsis 本身在现代浏览器中支持良好，但只要漏掉任意一个前提，它就完全不生效。
为什么 text-overflow: ellipsis 总是不显示省略号
根本原因不是浏览器不支持，而是 CSS 触发条件没凑齐。它像一个“开关”，必须三把钥匙同时插入才能转动：
-
white-space: nowrap缺失：文本默认可换行，压根没“溢出”，overflow: hidden就只是藏了一堆换行后的行尾空白 - 容器没设
width或max-width：浏览器不知道边界在哪，无法判断“哪里开始算溢出” -
overflow值不是hidden、scroll或auto：比如写了visible（默认值）或inherit，text-overflow直接被忽略 - 父级元素是
display: inline：块级约束失效，宽度计算不可靠；得加display: inline-block或block
text-overflow 在 IE 和老版 Edge 中的兼容写法
IE10+ 和 Edge12+ 原生支持 text-overflow: ellipsis，但 IE9 及更早需额外声明：
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis; /* IE9 必加 */
}注意：-ms-text-overflow 仅对 IE9 有效，现代项目可忽略；但若仍需支持 IE9，就不能省略这行。
立即学习“前端免费学习笔记（深入）”；
表格 <td> 里加省略号为什么经常失效
<td> 默认是 table-cell 显示模式，它会无视 white-space: nowrap 的某些行为，尤其在内容含空格或长单词时。常见解法：
- 强制改显示类型：
display: block或display: inline-block（但会破坏表格布局，慎用） - 更稳妥的做法：保留
table-cell，但加word-break: keep-all防止单词内断行，再配合white-space: nowrap - 给
<td>加title属性，鼠标悬停显示全文，作为视觉兜底 - 避免在
<td>内嵌套<div>后再设省略号——多一层 DOM 就多一层继承和计算偏差
多行省略号真没法靠纯 CSS 安全落地
-webkit-line-clamp 看似能实现多行截断，但它本质是 WebKit 私有属性，Firefox 全面不支持，Safari 17+ 才修复部分 bug，且依赖 display: -webkit-box 这种已过时的 flex 变体。
如果必须多行省略，现实选择只有两个：
- 用 JS 动态计算：读取
element.scrollHeight和clientHeight，逐字截断直到高度达标（注意字体、行高、padding 影响） - 服务端预截断：后端按字符数或字节数提前截断 + 加 “…” 标识，前端只负责渲染，最稳定
别信“一行 CSS 实现三行省略号”的方案——它在 Safari 某些版本里会漏掉最后一行文字，或把省略号叠在文字上，问题出在渲染时机和盒模型计算差异，不是调个参数能修好的。
