单行文本省略号必须同时满足四个条件：white-space: nowrap、overflow: hidden、text-overflow: ellipsis，以及明确的 width 或 max-width；table 中需额外设置 table-layout: fixed 才能使 td 内省略号生效。

必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可；否则省略号不会出现。

单行文本省略号的三个必要条件

浏览器只认这组组合，少任何一个都会失效：

• white-space: nowrap：强制文本不换行，这是前提。如果允许换行，text-overflow 就没作用对象
• overflow: hidden：必须是非 visible 值（比如 scroll 或 auto 也行，但 hidden 最常用）
• text-overflow: ellipsis：仅控制“如何表示被截断”，本身不触发截断，依赖前两者
• 元素必须有明确宽度限制：用 width 或 max-width，否则容器会自适应撑开，没有“溢出”可言

table td 里加省略号为什么经常失效

表格单元格默认是 display: table-cell，它会忽略 white-space 和 text-overflow 的常规行为，除非你主动约束布局：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 给 table 加 table-layout: fixed，否则列宽由内容决定，td 的 width 或 max-width 无效
• td 需要同时设 white-space: nowrap、overflow: hidden、text-overflow: ellipsis
• 推荐用 max-width 而非 width，更适配响应式场景
• 避免用 word-break: break-all —— 它会破坏省略号逻辑，改用 word-break: keep-all 或保留默认

多行文本省略号不能只靠 text-overflow

text-overflow: ellipsis 本身只支持单行。要实现两行或三行截断，必须用 WebKit 私有属性组合：

• 必需写全这四条：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden
• -webkit-line-clamp 是行数控制开关，值为整数，不是 2px 或 2rem
• 这个方案在 Safari、Chrome、Edge 有效，Firefox 不支持（需 JS fallback 或放弃）
• 别忘了仍然需要 width 或 max-width，否则 -webkit-box 无法计算截断点

最容易被忽略的是：省略号生效的前提是“有溢出”，而溢出取决于宽度 + 白空间处理 + 溢出裁剪三者共同作用。很多人只写 text-overflow: ellipsis 就以为完事了，结果什么都没发生——其实它根本没机会被触发。

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