table-layout: fixed 是表格列宽控制的硬性前提，必须加在 上并配合明确宽度、 显式宽度及 四个声明（white-space: nowrap、overflow: hidden、max-width、text-overflow: ellipsis），flex 布局下还需 min-width: 0。
table-layout: fixed 是硬性前提，漏掉就白配
表格默认用 table-layout: auto，列宽由内容撑开——哪怕你给 <td> 写了 <code>max-width: 150px，浏览器也当没看见。table-layout: fixed 必须加在 <table> 上，它才认这个宽度约束。不加这句，其他所有 CSS 都是无效劳动。
<p>注意两点：</p>
<ul><li><code><table> 得有明确宽度（比如 <code>width: 100% 或具体像素值），否则 table-layout: fixed 无法计算列宽
<colgroup></colgroup>，它的 width 值必须显式设置，且不能是 auto；否则 <td> 的 <code>max-width 可能被忽略
td 必须凑齐四个声明，缺一不可
text-overflow: ellipsis 不是“开关”，它只负责画省略号。真正触发截断的是另外三个条件共同作用的结果。每个 <td>（或 <code><th>）上必须同时写：
<ul>
<li>
<code>white-space: nowrap：禁止换行，让文本有机会“溢出”
overflow: hidden：隐藏超出部分（visible 是默认值，完全不截断）max-width: 150px（或类似值）：提供明确的宽度边界；比 width 更适配响应式场景text-overflow: ellipsis：最后一步，告诉浏览器“溢出时画 …”常见错误是只写后两项，漏掉 white-space: nowrap 或宽度——文字照常换行，根本没进入“单行溢出”逻辑。
Flex 容器里嵌套表格时，min-width: 0 是隐形门槛
如果表格外层是 display: flex（比如用 Flex 布局做卡片容器），<td> 默认继承 <code>min-width: auto，会强行撑开列宽，绕过所有截断规则。
解决办法是在 <td> 上加：
<ul>
<li>
<code>min-width: 0：覆盖 Flex 默认行为，让 overflow: hidden 生效
width: 0 + flex: 1，进一步锁定宽度计算逻辑这个 min-width: 0 看似无关紧要，但只要没写，哪怕其他三条全对，省略号也不会出现。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
中文混排、字体变化会悄悄破坏效果
这套方案对布局极其敏感：
- 中文按字断行，容易触发省略；英文长单词（如 URL）可能顶满整行，导致省略位置偏移
- 如果
<td> 设了固定 <code>height，而font-size或line-height后续被重置，可能切掉半行字 - emoji、全角符号、中英文混排时渲染宽度不一致，纯靠像素值控制容易撑破或留白过多
真正稳定的写法是放弃固定 height，用 max-width + white-space: nowrap 组合，再配合 table-layout: fixed 锁死列宽——其余变量越少，越不容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
