必须设置 table-layout: fixed，否则 text-overflow: ellipsis 无效；再配合 white-space: nowrap、overflow: hidden、max-width 四属性缺一不可。
表格单元格文字截断不能只靠 overflow: hidden，否则大概率失效——根本原因是表格默认的自动布局机制会撑开列宽，让 text-overflow: ellipsis 失去作用条件。
为什么直接给 td 加 text-overflow: ellipsis 没反应？
常见错误现象：加了 white-space: nowrap、overflow: hidden、text-overflow: ellipsis，但文字依然换行或把表格撑得变形。
-
text-overflow要求元素有「明确宽度限制」+「overflow不是visible」，而默认table的table-layout: auto会让浏览器动态计算列宽，td实际没有生效的宽度约束 -
td是表格单元格，不是普通块级元素，它的尺寸受父级table和同行其他单元格影响，单纯设max-width常被忽略 - 即使设了
width，若没配合table-layout: fixed，浏览器仍可能优先按内容伸缩列宽
必须加 table-layout: fixed 才能生效
这是最关键的一步。不加它，其他样式大概率白配。
-
table-layout: fixed让表格按列定义的宽度（如col宽度、th/td的width或max-width）来分配列宽，不再被内容反向撑开 - 建议在
table上统一设置：table { table-layout: fixed; width: 100%; } - 之后再给
td或th设置具体宽度约束，比如width: 120px或max-width: 150px（推荐后者，更灵活）
td 的完整省略样式怎么写？
四个属性缺一不可，顺序无关，但必须同时存在：
td, th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px; /* 必须有明确宽度限制 */
}
-
white-space: nowrap强制单行，这是text-overflow: ellipsis的前提 -
overflow: hidden必须是非visible值，scroll或auto也行，但视觉上通常选hidden -
text-overflow: ellipsis只对单行有效；多行要用-webkit-line-clamp，且不兼容 Firefox - 如果某列需要响应式宽度，可用
max-width: 20vw或配合媒体查询调整max-width值
鼠标悬停显示完整内容，怎么加 title？
纯 CSS 截断后，用户看不到原文。补上 title 是最轻量的方案，但要注意 DOM 层面是否已存在。
- 如果表格数据是服务端渲染或静态 HTML，直接在
td上写：<td title="完整文本内容">截断文本</td> - 如果是 JS 动态生成，记得在插入时同步设置：
cell.setAttribute('title', fullText) - 避免用
innerHTML直接拼接字符串设title，防止 XSS；优先用textContent或setAttribute - 注意：Excel 导出等场景中，
title不会被导出，如需导出完整内容，得另存原始数据字段
真正容易被忽略的是 table-layout: fixed 这一行——很多人试了十几种 CSS 组合，就是忘了它。一旦漏掉，后面所有样式都在对抗浏览器默认行为，注定失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
