必须设置 table-layout: fixed 且 table 有明确宽度，td 才能生效 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和 width/max-width 四属性；否则文本不省略。
td 设置固定宽度后文本不自动省略，不是样式写得不够多，而是缺了表格层面的布局控制——table-layout: fixed 没加，或加了但没配齐前提条件。
table 必须声明 table-layout: fixed 且有明确宽度
默认 table-layout: auto 下，浏览器会扫描所有单元格内容再决定列宽，此时给 td 设 width 或 max-width 基本无效，因为整列会被最长内容撑开，“溢出”根本不会发生。
-
table标签必须同时设置table-layout: fixed和具体宽度（如width: 100%或width: 800px） - 若用百分比宽度，父容器（如
div）也得有明确宽度，否则100%无从计算 - 不推荐只靠
td的width控制列宽；优先用<col>或table-layout: fixed+colgroup统一管理
td 上四属性缺一不可：white-space: nowrap、overflow: hidden、text-overflow: ellipsis、width 或 max-width
只写 text-overflow: ellipsis 是白搭。它不是独立生效的属性，而是一个“触发型”表现，依赖其他三个条件共同成立：
-
white-space: nowrap：禁用换行，让文本在单行内横向延展（不能用pre或pre-wrap替代） -
overflow: hidden：裁剪超出区域，这是text-overflow起效的前提 -
text-overflow: ellipsis：仅在单行 + 隐藏溢出时渲染…（Firefox 不支持该值用于td，需留意兼容性） -
width或max-width：必须是具体值（如120px），百分比在某些嵌套场景下可能失效；写在td上不如写在<col>里稳定
鼠标悬停看全文？title 属性最轻量，但有隐藏缺陷
给 td 加 title="完整文本" 确实能快速补全信息，但要注意：
- 移动端无 hover，
title几乎不可用 - 屏幕阅读器对
title支持不一致，无障碍体验差 - 长文本可能被截断（部分浏览器对
title字数有限制） - 如果内容含 HTML 实体或特殊字符，要确保
title值已正确转义，否则解析失败
多行省略在 td 中基本不可行
别试 -webkit-line-clamp。它在 td 里完全不生效，因为表格单元格的渲染流和 display: -webkit-box 冲突。官方不支持，所有“成功案例”都是误判或用了非标准 hack。
真要多行截断，只有两个务实选择：
- 服务端提前截断 + 后缀
…，再用title或 tooltip 补全 - 放弃
td，改用div模拟表格布局（display: table-cell），再上-webkit-box方案——但会丢失原生表格语义和可访问性
最常被忽略的一点：即使所有 CSS 都写对了，只要表格没设宽度、或父容器塌陷、或用了 flex 包裹却没加 min-width: 0，max-width 就会静默失效——这时候查 computed styles 会发现宽度是 auto，而不是你写的 120px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
