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。
.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
基于 inline-block 元素失效的具体问题
当元素设置为 display: inline-block 时，若未明确指定宽度，其宽度由内容决定，导致 text-overflow 依然失效。必须为其设置固定宽度或百分比宽度，才能强制触发截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
