table-layout: fixed 是唯一能真正锁定列宽的方案，需配合<col>或首行单元格设置宽度生效，内容溢出需手动处理换行或省略，且该属性不继承、必须直接作用于<table>元素。
table-layout: fixed 是控制溢出的底层开关
默认的 table-layout: auto 会让浏览器根据内容动态计算列宽，结果就是内容长的单元格撑开整列，破坏布局。必须显式设为 table-layout: fixed，才能让表格按 col 或第一行 th/td 的宽度声明来分配列宽，后续内容才可控。
注意：设了 table-layout: fixed 后，width 必须作用在 table 或 col 上才生效；直接写在 td 上会被忽略。
- 推荐在
table上设width: 100%，再用col标签或th:first-child等方式定义各列宽度 - 如果用 CSS Grid 或 Flex 替代表格布局，反而更易控溢出，但语义化会丢失
white-space + overflow + text-overflow 组合封住单行溢出
对单行文本截断，三者缺一不可：
-
white-space: nowrap：禁止换行 -
overflow: hidden：隐藏超出部分（仅对有明确宽高的块级元素有效） -
text-overflow: ellipsis：显示省略号（只对单行生效）
常见错误是只加 text-overflow: ellipsis 却没配前两项，结果毫无反应。另外，td 默认是 display: table-cell，不支持 text-overflow，需额外加 display: block 或 display: inline-block —— 但这会破坏表格语义和对齐，更稳妥的做法是包裹一层 div：
立即学习“前端免费学习笔记（深入）”；
<td><div class="truncate">超长文本内容</div></td>
对应样式：.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
多行溢出用 -webkit-line-clamp（仅 WebKit/Chromium）
要截两行或三行并加省略号，目前只有 -webkit-line-clamp 可靠，但它不是标准属性，Firefox 不支持，Safari 17+ 才修复了部分 bug。
使用时必须配合：
display: -webkit-box-webkit-box-orient: vertical-webkit-line-clamp: 2overflow: hidden
同样不能直接写在 td 上，得套 div。还要注意：若单元格高度被 line-height 或 padding 影响，实际显示行数可能不准，建议用 max-height 辅助限制。
内容本身是链接或带内联元素时容易失效
当 td 里有 a、span、img 等内联元素，尤其是未设置 max-width 的图片，会强行撑开容器，导致上述截断规则全部失效。
- 图片必须加
max-width: 100%; height: auto - 链接或按钮类元素建议设
word-break: break-all或overflow-wrap: break-word防止单词过长 - 避免在
td内用float或position: absolute，它们会脱离文档流，破坏table-layout: fixed的计算逻辑
最隐蔽的问题是：某些 UI 框架（如 Bootstrap Table）会给 td 加 vertical-align: middle 和 padding，这些看似无关的样式会影响 line-clamp 的行高计算，调试时得逐个关闭验证。
