直接给加text-overflow: ellipsis没反应，是因为未满足三个硬性条件：table-layout: fixed（写在table上）、table宽度约束（如width: 100%）、td需同时设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis和max-width（或width）。
为什么直接给td加text-overflow: ellipsis没反应
不是浏览器不支持，而是text-overflow: ellipsis根本没触发——它需要三个硬性条件同时满足：容器有明确宽度限制、white-space: nowrap、overflow值不能是visible。表格单元格默认用table-layout: auto，列宽由内容撑开，td实际没有生效的宽度约束，所以其他样式全白配。
table-layout: fixed必须加在table上
这是最关键的一步，漏掉就前功尽弃。只有table-layout: fixed才能让列宽真正受col、th或td的width/max-width控制，否则浏览器优先按内容伸缩列宽。
-
table { table-layout: fixed; width: 100%; }——推荐写在table选择器上，别只作用于某几列 - 配合
col设置基础列宽更稳定：<col style="width: 150px">，比单靠td的max-width更可靠 - 如果用
max-width（比如max-width: 20vw），记得在小屏下配合媒体查询调整，避免过窄导致提前截断
td上四属性缺一不可
仅设overflow: hidden只能裁剪，看不到省略号；只加text-overflow: ellipsis但没white-space: nowrap，文本照样换行撑高单元格。
-
white-space: nowrap——强制单行，是ellipsis的前提 -
overflow: hidden——必须是非visible值，scroll或auto也行，但视觉上通常选hidden -
text-overflow: ellipsis——只对单行有效，多行得另想办法 -
max-width: 150px（或width）——写在td或th上，max-width比width更灵活，尤其响应式场景
鼠标悬停显示完整内容，title怎么加才安全
纯CSS截断后用户看不到原文，补title是最轻量方案，但容易忽略DOM结构和XSS风险。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染或静态HTML：直接写
<td title="完整文本">截断文本</td> - JS动态生成：用
cell.setAttribute('title', fullText)，别用innerHTML拼接，防止XSS - 如果数据本身含HTML标签（如
<br>），title会原样显示标签字符，此时建议先用textContent提取纯文本再设title
table和同行其他单元格共同约束，table-layout: fixed这一步绕不开，而且必须写在table上——写在td或tbody上无效。 
