根本原因是table-layout: auto导致列宽由内容撑开，td缺乏有效宽度约束；必须加table-layout: fixed，并配合white-space: nowrap、overflow: hidden、max-width及text-overflow: ellipsis四条件共存。

为什么表格里加了 text-overflow: ellipsis 没反应

根本原因不是 CSS 写错了，而是表格默认的 table-layout: auto 让列宽完全由内容撑开，td 实际没有生效的宽度约束——哪怕你写了 max-width: 150px，浏览器也会优先按最长单元格内容重算整列宽度，导致 overflow: hidden 形同虚设。

table-layout: fixed 是必须加的第一步

不加这句，其他所有样式都白配。它强制表格按 th 或 td 的 width/max-width 定列宽，而不是动态计算。

• 给 加 table-layout: fixed（必须写在 table 元素上，不能只写在 td 上）
  列宽优先从
  或第一行
  的 width 获取；没设时，td 的 max-width 才起作用

  注意：加了 table-layout: fixed 后，所有列宽总和可能小于表格宽度，空白会右对齐或拉伸最后一列（取决于 border-collapse 和 width 设置）

  td 必须同时满足四个条件

  单行省略号不是“开关”，是结果——只有当文本真正在单行内被物理截断时才出现。漏掉任意一个，text-overflow: ellipsis 就被浏览器静默忽略。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • white-space: nowrap：禁用换行，这是前提；normal 或 pre-wrap 下它完全不工作
  • overflow: hidden：必须是 hidden，visible（默认）、auto、scroll 都不行
  • max-width（推荐）或 width：必须是明确值，比如 120px、20vw；width: auto、fit-content 或未设宽都无效
  • text-overflow: ellipsis：最后一步，只负责画 …，不参与截断逻辑

  响应式场景下容易踩的坑

  固定像素宽度在移动端极易过早截断，但用百分比又可能在 flex 表格容器中失效。更稳妥的做法是：

  • 用 max-width 替代 width，比如 max-width: 150px，允许窄屏时自动收缩
  • 结合媒体查询动态调宽：@media (max-width: 768px) { td { max-width: 80px; } }
  • 如果表格本身是响应式（如父容器 overflow-x: auto），记得给 td 加 min-width: 0，防止 flex 子项默认的 min-width: auto 把宽度撑爆
  • 含图标或 span 的单元格，要确保子元素也设 display: inline 或 inline-block，否则块级子元素会打断行内流，让 nowrap 失效

  实际生效的关键就卡在那两道硬门槛：table-layout: fixed 和 td 的四条件共存。少一个，文字就照常换行或把表格撑变形——这不是兼容性问题，是机制没触发。

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