text-overflow: ellipsis显示省略号必须同时满足三个条件：white-space: nowrap、overflow: hidden、容器有明确宽度（width或max-width），缺一不可；在表格中还需table-layout: fixed配合。
直接加 overflow: hidden 不行，td 会照常换行撑高——这不是 CSS 失效，而是缺了关键组合条件。
为什么只设 overflow: hidden 没用
td 默认 white-space: normal，允许换行；文字一折行，就没有“溢出”可言，overflow: hidden 和 text-overflow: ellipsis 都不触发。你看到的“多行撑高”，其实是浏览器在按内容自适应高度，不是裁剪失败。
-
white-space: nowrap是强制单行的前提，否则所有后续规则都无效 - 仅设
nowrap也不够：没宽度限制，单元格会被拉得无限宽，依然没“溢出”可裁 -
table-layout: fixed必须加在<table>上，否则<col>或td的width/max-width很可能被忽略
td 里显示省略号（…）的硬性条件
三个条件必须同时满足，漏一个，… 就不会出现：
-
white-space: nowrap（禁用换行） -
overflow: hidden（父容器要有明确宽度，否则无“溢出”可裁） -
text-overflow: ellipsis（只对单行生效；多行需用display: -webkit-boxhack，不适用于原生td） -
width或max-width（写在td上，或由<col>+table-layout: fixed控制）
错误写法：<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">长文本</td> —— 缺宽度，无效。
立即学习“前端免费学习笔记（深入）”；
兼容 IE 和中文/英文混排的细节
老版本 IE 对 td 的换行逻辑更保守，光靠 white-space: nowrap 可能仍断行；现代浏览器通常够用，但中英文混排建议补一层保险：
-
word-break: keep-all：只在空格、连字符处断行，适合中英文混排 -
word-break: break-all：强制任意位置断行，适合纯英文/数字，但可能切开单词 - 图片或内联元素（如
<span>、<img>）不受white-space控制，需单独处理：max-width: 100%+height: auto - 最稳妥写法是把文本包一层
<div>，样式写在该div上：<td><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 120px;">文本</div></td>
容易被忽略的是：省略号只对纯文本生效，如果 td 里混了 <strong>、<a> 等内联标签，又没包裹块级容器，text-overflow 会失效——这时候必须用 <div> 包一层再设样式。
