text-overflow: ellipsis在表格中不生效的根本原因是table-layout: auto导致列宽由内容撑开，td不响应width/max-width；必须设table-layout: fixed并配合width/max-width、white-space: nowrap、overflow: hidden才能生效。
text-overflow: ellipsis 在表格里不生效，不是 CSS 写错了，而是表格默认行为拦住了它——table-layout: auto 让列宽随内容撑开，td 不认 width 或 max-width，white-space: nowrap 也压不住换行逻辑。必须先“锁住”表格结构，再配齐省略号三件套。
table-layout: fixed 是前提，不是可选项
表格默认用 table-layout: auto，列宽由最长单元格内容决定，你写 width: 120px 给 td 完全无效。必须给 table 显式设 table-layout: fixed，同时给 table 自身设一个明确宽度（比如 width: 100% 或 max-width: 800px），否则列宽还是算不准。
-
table-layout: fixed启用后，列宽才真正由col、th、td的width或max-width控制 - 如果只设了
table-layout: fixed但没给table设宽度，浏览器会按内容最小宽度渲染，列依然可能被撑开 - 响应式场景下，
table宽度建议用max-width+width: 100%组合，避免小屏溢出
td 必须同时满足三个硬条件
text-overflow: ellipsis 在 td 里生效，和普通 div 一样严苛，缺一不可：
-
width或max-width：必须是像素值或百分比（如max-width: 150px），flex: 1或width: fit-content不算 -
overflow: hidden：不能是visible（默认）、auto（滚动条可能闪现）或scroll（会显示滚动条） -
white-space: nowrap：最常漏掉的一环；normal或pre-wrap下，文本自动换行，根本不会触发截断
示例写法：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.ellipsis-cell {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Flex 布局嵌套表格时的坑
如果表格放在 display: flex 容器里，或者 td 本身用了 display: flex，text-overflow 很可能失效——因为 flex 子项默认 min-width: auto，会强行撑开去容纳全部文字，让 overflow: hidden 形同虚设。
- 解决方法只有一条：给
td加min-width: 0 - 配合
width: 0+flex: 1更稳，尤其在多列等分场景下 - 别指望
flex-shrink: 1替代min-width: 0，它不改变最小宽度约束
多行省略号在表格里基本不可靠
text-overflow: ellipsis 规范只定义对单行流生效，表格单元格天然不支持多行截断。虽然 WebKit 内核可用 display: -webkit-box + -webkit-line-clamp，但 Firefox 直到 v125 才实验性支持（需手动开启 flag），且在 td 中表现极不稳定——vertical-align、padding、字体变化都会导致行高计算偏移，省略位置错乱。
真要多行截断，JS 动态计算更可控：用 getComputedStyle(el).lineHeight 算出基准行高，乘以目标行数，设为 max-height，再配 overflow: hidden。但要注意，font-size 改变或用户缩放页面时，临界像素点会漂移，纯 CSS 方案在这里几乎必然妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
