HTML表格单元格文本溢出省略需协同设置：table必须设table-layout: fixed和width；td须同时满足white-space: nowrap、overflow: hidden、text-overflow: ellipsis及max-width；禁用-webkit-line-clamp；关键字段应保留完整内容并添加title提示。
HTML表格单元格实现文本溢出省略，关键不在
text-overflow: ellipsis却漏掉前提条件。
必须设置 table-layout: fixed
这是整个机制能跑起来的基础。默认的table-layout: auto会让列宽随内容撑开，td根本没“溢出”，省略号自然不触发。
- 给
<table>加width: 100%或具体像素值（如width: 800px） - 同时声明
table-layout: fixed - 不要写在
td上，必须作用于table元素
td 需配齐四要素
每个要省略的单元格必须同时满足：
-
white-space: nowrap：禁止换行，让文字挤成一行 -
overflow: hidden：裁掉超出部分 -
text-overflow: ellipsis：显示省略号 -
max-width（推荐）或width：明确限制宽度，比如max-width: 200px；用max-width比固定width更适配响应式
多行省略不能靠 -webkit-line-clamp
在td里强行用display: -webkit-box会破坏表格结构——列宽错乱、行高塌陷、Safari/Edge可能完全不渲染。这不是写法问题，是table-cell与-webkit-box底层不兼容。
立即学习“前端免费学习笔记（深入）”；
- 服务端截断：后端按字数或字节提前处理好，直接返回带
…的字符串 - 前端伪元素遮罩：给
td设max-height和overflow: hidden，再用::after在右下角叠加渐变背景+"\2026"字符 - 注意伪元素方案需匹配单元格背景色，且不响应字体缩放变化
关键字段别省略，改用 title 提示
ID、URL、时间戳、错误码这类字段语义上不可截断。视觉只显示一部分，但屏幕阅读器仍读全量，会造成信息不一致。
- 保留完整文本内容
- 加上
title="完整内容"，鼠标悬停可见（移动端需另配点击展开逻辑） - 避免用
text-overflow掩盖关键数据
