text-overflow: ellipsis 在 <td> 中不生效是因为表格默认 table-layout: auto 导致宽度不固定；需设置 table-layout: fixed、max-width、white-space: nowrap、overflow: hidden 四者缺一不可。
text-overflow: ellipsis 在 <td> 里不生效？不是 CSS 写错了，是表格默认行为拦住了它。
为什么 td 加了 white-space: nowrap 还不显示省略号
表格单元格默认按内容自适应宽度，text-overflow 要求元素有「明确的宽度限制」，而 td 的宽度由 table-layout 决定——默认是 auto，浏览器会不断撑开列宽来容纳内容，导致 max-width 形同虚设。
- 必须给
<table>设置table-layout: fixed，让列宽由第一行<th>或显式width控制 -
td自身不能依赖width: 100%（在fixed布局下无效），要直接设max-width或固定width - 若用了
flex或grid包裹表格，子元素td需加min-width: 0防止 flex 基线拉伸干扰宽度计算
table-layout: fixed 下的最小可用配置
这是能跑通的最简组合，缺一不可：
table {
table-layout: fixed;
width: 100%;
}
td, th {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
max-width比width更灵活，尤其配合响应式；但若列宽需严格对齐，用width更稳 - 别漏掉
white-space: nowrap—— 改成pre或pre-wrap会导致换行逻辑错乱 - 如果内容含中文/数字混排，建议额外加
word-break: keep-all防止中英文间被意外断行
鼠标悬停显示完整内容的实操要点
纯 CSS 方案只需利用 title 属性，无需 JS：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中给
<td>加title="完整文本"，浏览器原生支持悬停提示 - 如果内容动态生成，JS 赋值时注意：用
el.setAttribute('title', text)，而不是el.title = text（后者在某些旧版 Safari 中可能失效） - 避免用
data-*+ JS 模拟 tooltip——增加复杂度且无障碍支持差；原生title已满足基础需求
真正容易被忽略的是 table-layout: fixed 的连锁影响：它会让所有列宽按首行定义分配，后续行内容再长也不会撑开列。如果你的表头列宽不均，或者需要某列自动适应内容，就得手动给每列 <col> 设 width，否则视觉会失衡。
