根本原因是td为table-cell显示类型，不支持text-overflow；必须给table设table-layout:fixed、td设max-width/width、white-space:nowrap、overflow:hidden及text-overflow:ellipsis五者缺一不可。
表格单元格里text-overflow: ellipsis为什么总不生效？
根本原因不是overflow设错了，而是表格默认的布局行为在“捣乱”。<td>和<code><th>是<code>display: table-cell，它会优先按内容撑开列宽，哪怕你写了overflow: hidden，浏览器也先去“适应内容”，根本没机会触发截断。
必须加table-layout: fixed到<table>上，强制让列宽由你定义的<code>width或max-width决定，而不是由内容反推。否则其他所有样式都是白搭。
-
table-layout: fixed必须作用于<table>元素本身，不能只加在<code><td>上 <li><code><table>自身也要有明确宽度（比如<code>width: 100%或max-width: 600px），否则fixed无从参考 - 如果用了
colgroup或col，它们的width值才能真正起效；只靠<td>的<code>width属性不可靠overflow: hidden在表格里要配齐哪几个兄弟？单写
overflow: hidden对<td>无效，它必须和另外两个属性绑定使用，缺一不可： <ul> <li> <code>white-space: nowrap：防止文本自动换行——这是最容易漏的一环，normal或pre-wrap下text-overflow直接被忽略 -
max-width（推荐）或width（固定值）：必须是具体数值，flex: 1、100%在某些 flex 包裹场景下会失效 -
text-overflow: ellipsis：此时才真正激活，只写它等于没写
这四者（table-layout: fixed + max-width + white-space: nowrap + overflow: hidden + text-overflow: ellipsis）必须同时存在，顺序无关，但少一个就看不到省略号。
响应式表格中max-width怎么设才靠谱？
用px太死板，用%又容易在 flex 容器里算歪。更稳妥的做法是：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 优先用
max-width: min(200px, 30vw)这类min()函数，兼顾最小可读性和视口比例 - 配合媒体查询，在小屏下改用
white-space: normal并允许换行，比硬塞省略号更易读 - 避免在
<td>上直接写<code>width，改用col标签统一控制列宽，减少继承干扰 - 如果表格嵌套在
display: flex容器中，<td>需额外加<code>min-width: 0，否则 flex 基线会拉伸列宽导致溢出失效Firefox 或旧版 Safari 下多行省略号怎么兜底？
-webkit-line-clamp在 Firefox 中至今不支持（v125 起仅实验性 flag），纯 CSS 多行省略号在生产环境不能当主力用。真要兼容，得换思路：- 放弃
-webkit-box方案，改用 JS 检测：el.scrollWidth > el.clientWidth判断是否溢出，再动态截断+加"…" - 若坚持纯 CSS，可用
::after伪元素+渐变遮罩模拟省略效果，但要求height精确匹配line-height × 行数，且无法响应字体缩放 - 表格场景下，更务实的选择是：单行用
text-overflow，多行内容直接允许换行+设max-height，加滚动条或 tooltip 提示全文
最常被忽略的点：字体大小变化（比如用户放大了系统字号）、
letter-spacing、甚至系统渲染引擎差异，都会让“刚好卡在换行临界点”的容器突然失效——实测比理论推导更可靠。 - 放弃
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
