表格中overflow:hidden无效，根本原因是<td>默认由内容撑宽且无固定边界；必须配合table-layout:fixed、明确宽度（如max-width）及white-space:nowrap+text-overflow:ellipsis才能实现单行截断。
表格里 overflow: hidden 为什么不起作用？
直接给 <td> 加 overflow: hidden 很可能无效——这不是 bug，而是表格默认渲染机制决定的。浏览器会优先让单元格“撑开”以容纳内容，overflow 在这种动态宽度下被忽略。
必须先锁定列宽行为：
-
table元素上加table-layout: fixed，否则列宽由内容决定，overflow永远没机会生效 -
<td>或<th>必须有明确宽度约束：用max-width（推荐）或width，不能只靠父容器百分比或auto - 如果用了
flex或grid布局嵌套表格，还要检查子项是否被min-width: auto卡住——加min-width: 0才能真正收缩
text-overflow: ellipsis 在 <td> 中怎么配齐三件套？
只写 text-overflow: ellipsis 是白搭。它必须和另外两个属性绑定使用，且顺序无关，但缺一不可：
-
white-space: nowrap：强制单行，否则文本自动折行，省略号无从触发 -
overflow: hidden：隐藏超出部分，省略号才能“挤”出来 -
max-width: 150px（或类似值）：容器得有边界，否则浏览器不知道“溢出从哪算起”
常见翻车点：<td> 默认是 display: table-cell，它对 width 敏感，但对 max-width 支持较弱——所以更稳妥的做法是：在 <td> 里包一层 <div>，把三件套全加在 div 上，并设 display: block。
立即学习“前端免费学习笔记（深入）”；
英文路径、长URL 溢出怎么办？word-break 和 overflow-wrap 怎么选？
中文能靠 white-space: nowrap + ellipsis 截断，但英文/路径类文本（如 /api/v1/users/1234567890）中间没空格，不换行就会撑破表格。这时要主动“劈开”：
-
word-break: break-all：在任意字符间断行，适合纯技术字段，但可能把单词（如user_id）劈成user_和id，语义断裂 -
overflow-wrap: break-word（推荐）：只在必要时断开长单词，优先保全语义，对 URL 和驼峰命名更友好 - 如果既要省略号又要换行，二者不可兼得——
text-overflow: ellipsis只对单行有效；多行场景只能放弃省略号，用overflow-wrap+ 固定高度 +overflow: hidden截断
鼠标悬停看全文，title 属性怎么安全加？
title 是最轻量的补救方案，但容易出错：
- 静态 HTML：直接写
<td title="完整路径">...</td>，注意引号闭合，避免特殊字符（如双引号）导致解析失败 - JS 动态生成：别用
innerHTML += '<td title="' + text + '">...</td>'—— 万一text含引号或尖括号就炸了。改用cell.setAttribute('title', fullText) - 如果表格数据来自 API，且字段本身含 HTML 标签，
title会显示原始标签字符串（如<b>name</b>），不是渲染后效果——这时就得用 tooltip 组件，而非原生title
复杂点在于：同一单元格可能既要响应式截断，又要支持移动端点击展开，还要兼容 Firefox 对 -webkit-line-clamp 的无视——这些需求叠加时，CSS 方案很快见底，得提前预留 JS fallback 路径。
