text-overflow: ellipsis 在 中不生效是因为表格默认 table-layout: auto 导致宽度不固定；需设置 table-layout: fixed、max-width、white-space: nowrap、overflow: hidden 四者缺一不可。

text-overflow: ellipsis 在 <td> 里不生效？不是 CSS 写错了，是表格默认行为拦住了它。 <h3>为什么 <code>td 加了 white-space: nowrap 还不显示省略号

表格单元格默认按内容自适应宽度，text-overflow 要求元素有「明确的宽度限制」，而 td 的宽度由 table-layout 决定——默认是 auto，浏览器会不断撑开列宽来容纳内容，导致 max-width 形同虚设。

• 必须给 <table> 设置 <code>table-layout: fixed，让列宽由第一行 <th> 或显式 <code>width 控制
• td 自身不能依赖 width: 100%（在 fixed 布局下无效），要直接设 max-width 或固定 width
• 若用了 flex 或 grid 包裹表格，子元素 td 需加 min-width: 0 防止 flex 基线拉伸干扰宽度计算

table-layout: fixed 下的最小可用配置

这是能跑通的最简组合，缺一不可：


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载

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> 加 <code>title="完整文本"，浏览器原生支持悬停提示
• 如果内容动态生成，JS 赋值时注意：用 el.setAttribute('title', text)，而不是 el.title = text（后者在某些旧版 Safari 中可能失效）
• 避免用 data-* + JS 模拟 tooltip——增加复杂度且无障碍支持差；原生 title 已满足基础需求

真正容易被忽略的是 table-layout: fixed 的连锁影响：它会让所有列宽按首行定义分配，后续行内容再长也不会撑开列。如果你的表头列宽不均，或者需要某列自动适应内容，就得手动给每列 <col> 设 width，否则视觉会失衡。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！