text-overflow: ellipsis 失效通常是因为元素未设置 width（或 max-width）且未限制为单行显示。必须同时满足 white-space: nowrap、明确的宽度约束以及 overflow: hidden，省略号才会生效。

为什么设置了 overflow: hidden 仍然不显示省略号

如果仅设置 overflow: hidden 而不指定宽度，块级元素会默认撑满父容器，内容始终能完全容纳在内部，因此没有触发裁剪的条件。必须显式定义 width 或 max-width，使内容宽度超过容器宽度时，浏览器才会计算溢出部分并应用省略号。

.container { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

为什么多行文本无法使用 text-overflow ellipsis

text-overflow 属性设计初衷仅用于单行文本截断。当文本换行时，该属性会被忽略，因为省略号无法在多行布局中正确定位。若需实现多行省略，需使用非标准的 -webkit-line-clamp 配合 display: -webkit-box。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

立即学习“前端免费学习笔记（深入）”；

.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

基于 inline-block 元素失效的具体问题

当元素设置为 display: inline-block 时，若未明确指定宽度，其宽度由内容决定，导致 text-overflow 依然失效。必须为其设置固定宽度或百分比宽度，才能强制触发截断逻辑。