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> 上，否则 <code><col> 或 td 的 width/max-width 很可能被忽略

  td 里显示省略号（…）的硬性条件

  三个条件必须同时满足，漏一个，… 就不会出现：

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • white-space: nowrap（禁用换行）
  • overflow: hidden（父容器要有明确宽度，否则无“溢出”可裁）
  • text-overflow: ellipsis（只对单行生效；多行需用 display: -webkit-box hack，不适用于原生 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></span>、<img>）不受 white-space 控制，需单独处理：max-width: 100% + height: auto
  • 最稳妥写法是把文本包一层 <div>，样式写在该 <code>div 上：<td><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 120px;">文本</div></td>

    容易被忽略的是：省略号只对纯文本生效，如果 td 里混了 <strong></strong>、<a></a> 等内联标签，又没包裹块级容器，text-overflow 会失效——这时候必须用 <div> 包一层再设样式。</div>