表格单元格内容过长时需同时设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis及max-width才能强制单行截断；多行截断需JavaScript实现；tooltip应兼顾可访问性；响应式下需用媒体查询或clamp()动态调整宽度。
表格单元格内容过长时直接截断不换行
默认情况下，<td> 会随内容撑开宽度，要强制截断必须同时控制三件事：禁止换行、隐藏溢出、添加省略号。只设 white-space: nowrap 不够，它会让文字横向无限延伸；只设 overflow: hidden 也不行，没有固定宽度或最大宽度，浏览器不知道“溢出”从哪开始。
正确做法是给 <td> 或其父 <th> 加上：
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px; /* 必须有明确的宽度约束 */
}注意：text-overflow: ellipsis 只对单行生效，且要求元素是块级或 inline-block —— 表格单元格默认是 table-cell，符合要求，不用额外改 display。
需要多行截断时不能只靠 CSS 原生属性
CSS 的 text-overflow: ellipsis 天然只支持单行。如果想在表格里实现「最多显示两行，超出加省略号」，纯 CSS 在大多数浏览器中不可靠（display: -webkit-box 方案在 Firefox 不兼容，且在 table-cell 上表现异常）。
立即学习“前端免费学习笔记（深入）”；
更稳妥的方式是用 JavaScript 控制，例如监听表格渲染后对每个目标 <td> 执行截断逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function truncateCell(cell, lines = 2, suffix = '…') {
const div = document.createElement('div');
div.style.cssText = 'display: inline-block; max-height: 0; visibility: hidden; position: absolute;';
div.textContent = cell.textContent;
document.body.appendChild(div);
<p>const lineHeight = parseInt(getComputedStyle(div).lineHeight) || 18;
const maxHeight = lines * lineHeight;</p><p>if (cell.scrollHeight > maxHeight) {
let text = cell.textContent;
while (text.length > 0 && cell.scrollHeight > maxHeight) {
text = text.slice(0, -1);
cell.textContent = text + suffix;
}
}
document.body.removeChild(div);
}调用时： truncateCell(document.querySelector('td:nth-child(2)'), 2)。
鼠标悬停显示完整内容的提示必须可访问
很多人用 title 属性实现 hover 提示，但它有严重缺陷：不支持键盘焦点、移动端不触发、无法自定义样式、读屏器支持不稳定。更合理的方式是用 aria-label 配合视觉 tooltip：
- 保留原始文本在
aria-label中：<td aria-label="这是一段非常非常长的说明文字">这是一段非常...</td> - 用 CSS 实现 tooltip 气泡（基于
::after或绝对定位<div class="tooltip">），并确保它有role="tooltip"和aria-hidden="true" - 监听
mouseenter/focus显示，mouseleave/blur隐藏，保证键盘用户也能触达
别忽略焦点管理 —— 如果 tooltip 是浮层，按 Tab 时焦点不应掉进空白区域或丢失。
响应式场景下截断逻辑容易失效
当表格在小屏幕上变成横向滚动（overflow-x: auto）时，固定 max-width 会导致某些列被过度压缩，而另一些列仍过宽。此时应改用相对单位或媒体查询动态调整：
@media (max-width: 768px) {
.data-table td:nth-child(3),
.data-table th:nth-child(3) {
max-width: 120px;
}
.data-table td:nth-child(4),
.data-table th:nth-child(4) {
max-width: 80px;
}
}更灵活的做法是结合 ch 单位（按字符宽度）或 clamp()：max-width: clamp(80px, 12vw, 160px);。但要注意：所有截断逻辑都依赖于「容器宽度已知」，如果父级是 flex 或 grid 且未设 min-width，table-layout: fixed 就成了必要手段。
真正麻烦的是动态加载内容后插入表格 —— 此时 CSS 截断自动生效，但 JS 截断需手动重跑，且 tooltip 绑定也要重新初始化。这点很容易漏。
