table-layout: fixed 是表格省略号生效的前提，需同时满足：table 设明确宽度、声明 table-layout: fixed、td 设 max-width 或固定 width；-webkit-line-clamp 在 td 中不可用；多行省略推荐伪元素遮罩或服务端截断；关键字段禁用省略，改用 title 提示。
table-layout: fixed 是表格省略号生效的前提
直接对 td 写 text-overflow: ellipsis 几乎一定无效——哪怕你加了 white-space: nowrap 和 overflow: hidden。根本原因在于：默认的 table-layout: auto 会让列宽随内容撑开，td 实际上“没溢出”，浏览器压根不触发省略逻辑。
必须同时满足三点：
-
table元素设明确宽度（如width: 100%或具体像素值） -
table上声明table-layout: fixed（不能写在td上） -
td设max-width（推荐）或固定width，否则它仍会继承自适应行为
-webkit-line-clamp 在 td 里基本不可用
想在表格单元格里用 -webkit-line-clamp 实现多行省略？别试了。它依赖 display: -webkit-box，而 td 的 display: table-cell 与之冲突，强行覆盖会导致表格结构错乱、列宽崩塌、甚至整行错位。
常见错误现象包括：
立即学习“前端免费学习笔记（深入）”；
-
td高度塌陷或无限拉高 - 相邻列被挤压变形
- 省略号只在 Chrome 偶尔出现，Firefox / Safari 完全不渲染
这不是写法问题，是 display 模式底层不兼容。WebKit 内核也不保证 table-cell + -webkit-box 的组合行为稳定。
真正可用的表格多行省略方案只有两种
一种是服务端截断：提前按字符数或字节数处理好字符串，返回带 "…" 的结果。另一种是前端伪元素遮罩，它绕过所有 display 限制，只靠视觉覆盖：
- 给
td设固定max-height（例如line-height: 1.4em× 3 行 =4.2em）和overflow: hidden -
td加position: relative - 用
::after在右下角叠加渐变遮罩：background: linear-gradient(to right, transparent, #fff 70%)，再配content: "\2026" - 注意
::after的padding-left要留够省略号显示空间，且background颜色需匹配单元格背景
这个方案在 Firefox、Chrome、Safari、Edge 全系可用，但有个硬约束：它不响应字体缩放或动态字号变化，如果页面支持辅助功能放大文字，得额外监听 font-size 变更并重算 max-height。
关键信息字段千万别加省略号
表格里常出现 ID、URL、时间戳、错误码这类字段，它们语义上不允许截断。加了 text-overflow: ellipsis 后，屏幕阅读器仍读完整内容，而视觉只显示部分——用户看到和听到的不一致，等于埋雷。
更稳妥的做法：
- 用
title属性兜底，鼠标悬停可见全量文本（注意移动端无 hover） - 对关键字段禁用省略，保留换行或滚动容器
- 若必须压缩，优先用服务端生成带省略号的摘要字段，而非前端样式裁剪
表格不是普通 div，它的布局约束强、兼容路径窄。想让多行省略在 td 里稳住，就得放弃纯 CSS 截断幻想，直面 display 模式和内核差异这两个最硬的墙。
