text-overflow: ellipsis在表格中不生效，是因为未同时满足white-space: nowrap、overflow: hidden、max-width（或width）及table-layout: fixed四要素；缺一即失效，且td默认display: table-cell对宽度约束响应弱。
为什么 text-overflow: ellipsis 在 <td> 里完全不生效<p>不是浏览器 bug，也不是兼容性问题——是三个硬性条件一个都没满足，浏览器直接忽略该声明。最常见的是：只加了 <code>text-overflow: ellipsis，却漏掉 white-space: nowrap、overflow: hidden，也没给单元格设宽度约束。
尤其注意：<td> 默认是 <code>display: table-cell，它对 width 和 max-width 的响应很弱，光写 max-width: 150px 往往无效。
-
white-space: normal（默认）→ 文本自动换行，text-overflow压根不触发 -
overflow: visible（默认）→ 溢出内容照常显示，text-overflow被静默丢弃 - 没设
table-layout: fixed→ 列宽由内容撑开，max-width在<td> 上基本失效<h3> <code>table-layout: fixed是表格截断的前置开关没有它，
<col>宽度、<td> 的 <code>width或max-width都很难真正起效。浏览器会优先按内容宽度重排表格，导致你写的宽度约束被无视。必须在
<table> 元素上显式设置：<pre class="brush:php;toolbar:false;">table { table-layout: fixed; width: 100%; }</pre> <p>之后才能靠 <code><col>或<td> 样式控制列宽：<ul> <li>用 <code><col width="150">最稳定，但需配合table-layout: fixed - 在
<td> 上写 <code>max-width: 150px可行，但前提是父<table> 已启用 <code>fixed - 避免用
width: auto或未设宽的 flex / grid 布局包裹表格，会破坏约束链
单行省略号四要素缺一不可
哪怕只少一个，ellipsis 就不会出现。顺序无关，但必须共存：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px; /* 或 width，但 max-width 更适应响应式 */
}
-
white-space: nowrap是强制单行的基础，pre-wrap或normal都不行 -
overflow: hidden必须是hidden、scroll或auto，visible无效 -
max-width推荐优于width，尤其在移动端或动态列宽场景 -
height不参与判断，设了也无用；line-height不影响截断逻辑，但影响视觉行高
鼠标悬停显示全文的稳妥做法
纯 CSS 实现比 JS 更轻量，且无需监听尺寸变化。关键是利用 title 属性，它天然支持长文本提示，且无障碍友好：
- HTML 中直接写
<td title="完整文本内容">截断文本</td> - 不需要额外 CSS，所有浏览器原生支持，包括屏幕阅读器
- 比
:hover+overflow: visible更可靠——后者在移动端无 hover，且可能破坏布局流 - 若需自定义 tooltip 样式，再引入 JS 方案；但多数业务场景，
title已足够
字体大小、字间距、甚至系统渲染引擎都可能让临界像素差 1px，导致省略号闪现或消失。实测比理论推导更管用，别只盯着代码逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
