table-layout: fixed 是表格省略号生效的前提，需在 table 上设置，并配合 td/th 的 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和明确 width/max-width；flex 容器中还需加 min-width: 0。
table-layout: fixed 是表格省略号的前提
直接给 <td> 加 <code>text-overflow: ellipsis 几乎总失效，根本原因是表格默认 table-layout: auto —— 浏览器会动态拉宽列来容纳最长内容，导致你设的 width 或 max-width 被无视。必须先在 <table> 上强制启用固定布局：
<ul>
<li>
<code>table { table-layout: fixed; } —— 这一步不可跳过，否则后续所有样式都形同虚设
<th> 或第一行 <code><td> 的 <code>width 决定，只设一次就能约束整列
max-width，需配合 width: 100% 才能在 flex 或响应式容器中生效td/th 必须同时满足四条 CSS 规则
光有 table-layout: fixed 还不够。<td> 或 <code><th> 必须共存以下四条声明，缺一不可：
<ul>
<li>
<code>white-space: nowrap —— 不是 pre、pre-wrap，也不是靠 JS 截断字符串
overflow: hidden —— 不能是 visible（默认）、auto（滚动条可能闪现）或 scroll
text-overflow: ellipsis —— 注意拼写是 ellipsis，不是 ellipses 或 dot
width 或 max-width —— 必须是明确值，如 120px、20vw；flex: 1 或 100% 单独写不生效Flex 容器里的表格单元格要额外加 min-width: 0
如果表格嵌在 display: flex 的父容器里（比如卡片布局、弹窗表头），<td> 会继承 flex 子项默认的 <code>min-width: auto，强行撑开宽度绕过截断。此时必须显式重置：
-
td { min-width: 0; }—— 这是唯一解，不是可选项 - 建议搭配
width: 0使用，避免某些浏览器在 flex-grow 场景下计算偏差 - 若父级用了
display: inline-flex，同样适用该规则
鼠标悬停显示完整文本只需 title 属性
纯 CSS 实现 tooltip，无需 JS：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给
<td> 直接加 <code>title属性：<td title="完整文本内容">超长内容</td> - 浏览器原生支持，hover 时自动浮出小气泡，文字自动换行、无长度限制
- 注意：title 值不能含双引号或尖括号，否则需 HTML 实体转义（如
"、）
真正卡住人的从来不是 text-overflow: ellipsis 这一行代码，而是它背后那四个必须共存的条件——尤其是 table-layout: fixed 和 min-width: 0 这两个最容易被忽略的“开关”。漏掉任意一个，浏览器就当它不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
