单行文本省略号必须同时满足四个条件：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 的常规行为，除非你主动约束布局：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给 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 就以为完事了，结果什么都没发生——其实它根本没机会被触发。