table-layout: fixed 是表格省略号生效的前提，需在 table 上设置，并配合 td/th 的 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和明确 width/max-width；Flex 容器中还需加 min-width: 0。

table-layout: fixed 是表格省略号的前提

直接给 加 text-overflow: ellipsis 几乎总失效，根本原因是表格默认 table-layout: auto —— 浏览器会动态拉宽列来容纳最长内容，导致你设的 width 或 max-width 被无视。必须先在

上强制启用固定布局：

• table { table-layout: fixed; } —— 这一步不可跳过，否则后续所有样式都形同虚设
• 列宽由

浏览器原生支持，hover 时自动浮出小气泡，文字自动换行、无长度限制

注意：title 值不能含双引号或尖括号，否则需 HTML 实体转义（如 "、）

真正卡住人的从来不是 text-overflow: ellipsis 这一行代码，而是它背后那四个必须共存的条件——尤其是 table-layout: fixed 和 min-width: 0 这两个最容易被忽略的“开关”。漏掉任意一个，浏览器就当它不存在。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

或第一行	的 width 决定，只设一次就能约束整列 若用 max-width，需配合 width: 100% 才能在 flex 或响应式容器中生效 td/th 必须同时满足四条 CSS 规则 光有 table-layout: fixed 还不够。	或	必须共存以下四条声明，缺一不可： 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 的父容器里（比如卡片布局、弹窗表头），	会继承 flex 子项默认的 min-width: auto，强行撑开宽度绕过截断。此时必须显式重置： td { min-width: 0; } —— 这是唯一解，不是可选项 建议搭配 width: 0 使用，避免某些浏览器在 flex-grow 场景下计算偏差 若父级用了 display: inline-flex，同样适用该规则 鼠标悬停显示完整文本只需 title 属性 纯 CSS 实现 tooltip，无需 JS： 给	直接加 title 属性：	超长内容

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！