table-layout: fixed 是省略号生效的硬性前提，必须配合 table 明确宽度、td/max-width 及 table-layout: fixed 三者共存，缺一不可；否则 td 无真实溢出，text-overflow: ellipsis 不触发。
table-layout: fixed 是省略号生效的硬性前提
不加 table-layout: fixed，text-overflow: ellipsis 在 td 里基本不会触发——哪怕你写了全部四行 CSS。原因很直接：默认 table-layout: auto 会让浏览器根据内容动态撑开列宽，td 实际没有「被约束的宽度」，自然谈不上「溢出」。
必须同时满足三点才可靠：
-
table元素本身设明确宽度（如width: 100%或width: 600px） -
td或th设max-width（比width更灵活，推荐） -
table-layout: fixed写在table上，不是td
常见错误是只给 td 加样式，却忘了父级 table 的布局控制权没交出去。
td 中 text-overflow: ellipsis 失效的典型组合
很多人照搬 div 的写法，直接给 td 加：
.td-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
结果无效。根本问题在于：td 没继承到宽度约束，它仍在按内容伸缩。关键缺失项包括：
- 没配
table-layout: fixed→ 列宽不受控 -
td缺少max-width→ 即使设了white-space: nowrap，浏览器仍可能优先撑列 - 外层容器用了
display: flex包裹table→ 破坏表格渲染上下文，table-cell行为异常 -
overflow: hidden对默认display: table-cell无效，除非有块级上下文（但改display: block会毁掉表格结构）
单行省略的最小可靠写法
以下四条 CSS 必须共存，缺一不可（顺序无关）：
table {
table-layout: fixed;
width: 100%;
}
<p>td, th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px; /<em> 必须有明确值，百分比或 vw 也可 </em>/
}</p>
注意点：
-
max-width比width更推荐，尤其在响应式场景下 -
white-space: nowrap是前提，漏掉就完全不触发省略号 -
overflow值必须是非visible（hidden、scroll、auto都可，但视觉上通常选hidden） -
height和line-height不影响判断，设了也无效
Firefox 不支持多行省略的 -webkit-line-clamp
想对 td 做两行截断？别指望 -webkit-line-clamp 能跨浏览器工作。Chrome/Safari/Edge 没问题，但 Firefox 直到 v125 仍是实验性支持，且需用户手动开启 layout.css.line-clamp.enabled flag——生产环境等于不可用。
如果你真需要多行截断，现实路径只有两个：
- 纯 CSS fallback：放弃省略号，用
white-space: normal+overflow-wrap: break-word+ 固定max-height+overflow: hidden，但无省略提示 - JS 辅助：用
getComputedStyle算行高，再结合文本长度动态截断加…，但要注意字体变化、vertical-align、img插入等导致的行高偏移
最常被忽略的是：同一段 CSS，在 font-size: 14px 下可能刚好触发省略，换成 16px 就失效——临界像素差 1px，浏览器就认为“还没溢出”。实测比推导更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
