overflow: hidden 对 <td> 和 <th> 基本无效，因表格单元格非标准块级上下文，Firefox 和 IE11 明确不支持；需用 <div> 包裹内容并设置 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 display: block 才生效。
overflow: hidden 对 <td> 和 <th> 基本无效，尤其在 Firefox 和 IE11 中。直接给单元格加该样式，大概率撑宽列、换行或完全无反应。
为什么 overflow: hidden 在 <td> 上不生效
表格单元格不是标准块级上下文，浏览器对其 overflow 的支持极差。Chrome 虽有部分兼容，但行为不稳定；Firefox 和 IE11 明确不支持。即使写了 overflow: hidden，长 URL、UUID 或连续英文仍会撑开列宽，破坏布局。设置 height + overflow: hidden 也常失效，因为 <td> 默认按内容撑高。
真正有效的省略号方案：必须套 <div>
把文本内容包裹进一个块级容器（如 <div>），再在其上施加完整约束条件。这是目前最稳定、跨浏览器可用的做法：
-
<td>需设明确宽度（width或max-width），否则省略号无裁剪基准 - 内部
<div>必须设display: block（默认是内联，三条规则对它不生效） -
<div>上同时加：white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 示例：
<td style="width: 150px;"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">/api/v1/users/1234567890</div></td>
想让长单词/无空格内容折行而不是撑列？用 overflow-wrap: break-word
当内容是 UUID、路径、URL 等连续无空格字符串时，强制单行省略可能丢失关键信息。更合理的是允许其在任意位置折行：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 直接加在
<td>上：overflow-wrap: break-word（word-wrap: break-word是旧写法，已废弃） - 必须配合
width或max-width才生效，否则仍无限延展 - 不能和
text-overflow: ellipsis同时用——二者逻辑冲突，得二选一 - 若需兼容老 IE，可加
word-break: break-all，但慎用，它会切开单词
整表横向溢出：外层加 overflow-x: auto
当列数多、总宽度远超视口（尤其移动端），与其强行压缩每列，不如允许水平滑动查看：
- 给
<table>外层包一个<div>，设overflow-x: auto - 该
<div>需有明确宽度（如width: 100%），否则auto不触发 - 避免给
<table>设width: 100%——它会拉伸列，反而加剧溢出 - 搭配
table-layout: fixed使用，能更好锁定列宽，防止滑动时列宽抖动
最易被忽略的是：省略号三件套（white-space: nowrap + overflow: hidden + text-overflow: ellipsis）缺一不可，且必须作用于块级元素；而 table-layout: fixed 是让 width 生效的前提，不是可选项。
