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，就不能省略这行。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

表格 <td> 里加省略号为什么经常失效<p><code><td> 默认是 <code>table-cell 显示模式，它会无视 white-space: nowrap 的某些行为，尤其在内容含空格或长单词时。常见解法：

• 强制改显示类型：display: block 或 display: inline-block（但会破坏表格布局，慎用）
• 更稳妥的做法：保留 table-cell，但加 word-break: keep-all 防止单词内断行，再配合 white-space: nowrap
• 给 <td> 加 <code>title 属性，鼠标悬停显示全文，作为视觉兜底
• 避免在 <td> 内嵌套 <code><div> 后再设省略号——多一层 DOM 就多一层继承和计算偏差<h3>多行省略号真没法靠纯 CSS 安全落地</h3> <p><code>-webkit-line-clamp 看似能实现多行截断，但它本质是 WebKit 私有属性，Firefox 全面不支持，Safari 17+ 才修复部分 bug，且依赖 display: -webkit-box 这种已过时的 flex 变体。

  如果必须多行省略，现实选择只有两个：

  • 用 JS 动态计算：读取 element.scrollHeight 和 clientHeight，逐字截断直到高度达标（注意字体、行高、padding 影响）
  • 服务端预截断：后端按字符数或字节数提前截断 + 加 “…” 标识，前端只负责渲染，最稳定

  别信“一行 CSS 实现三行省略号”的方案——它在 Safari 某些版本里会漏掉最后一行文字，或把省略号叠在文字上，问题出在渲染时机和盒模型计算差异，不是调个参数能修好的。