overflow:hidden 在 table-cell 上无效，因规范规定其被忽略；需在单元格内嵌套 block 容器并设 max-width、white-space:nowrap、text-overflow:ellipsis，且表格须用 table-layout:fixed 配合 col 宽度控制。
overflow:hidden 在 table-cell 上为什么不起作用
直接给 <td> 或 <code><th> 设置 <code>overflow: hidden 通常无效——这是浏览器对表格布局的默认行为限制。表格单元格（table-cell）的 overflow 属性被规范定义为「忽略」，除非显式改变其 display 值。
必须用 display:block 包裹内容才能生效
真正起作用的方式是：在单元格内加一层容器（如 <div>），并设为 <code>display: block，再对其应用 overflow: hidden 和尺寸约束。否则样式会被忽略。
常见错误写法：<td style="overflow:hidden; white-space:nowrap">超长文本</td> → 不会截断
正确做法：
<td>
<div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px;">
这是一段特别特别长的文本内容
</div>
</td>
-
max-width必须指定，否则overflow:hidden无边界可裁剪 -
white-space: nowrap防止换行，确保单行截断 -
text-overflow: ellipsis要配合display: block或inline-block才能显示省略号
table-layout: fixed 是控制列宽的关键
如果整列宽度不固定，即使单元格内 div 有 max-width，表格仍可能撑开。这时必须给 <table> 加 <code>table-layout: fixed，并为列（<col> 或 <th>/</th>
<td>）设置明确宽度。
<p>示例：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"></pre>
<table style="table-layout:fixed; width:100%;">
<col style="width:120px">
<tr><td><div style="overflow:hidden;...>文本</div></td></tr>
</table></pre>
<ul>
<li>不设 <code>table-layout: fixed，列宽由内容自适应，max-width 容易失效
<col> 比在每个 <td> 上重复写 width 更可靠、更轻量width 在 <td> 上，需配合 !important 才可能压过表格自动计算逻辑移动端或 flex 替代方案更可控
当表格结构复杂、需要响应式或多行截断时，硬套 table + overflow:hidden 很容易失控。此时建议：
- 用
display: flex模拟表格行，每个单元格用flex: 1+min-width控制，overflow行为完全受控 - 多行截断可用
-webkit-line-clamp（仅 WebKit），但需配合display: -webkit-box - 真正需要表格语义（如屏幕阅读器、导出 Excel）时，才坚持用
<table>；否则优先选语义清晰且样式自由的布局方式
表格里藏个 div 再设 overflow 看似简单，但实际要同时调好 table-layout、col、white-space、text-overflow 四个点，漏一个就白配。
