text-overflow: ellipsis 生效需同时满足三个条件：overflow: hidden、white-space: nowrap（单行）或 display: -webkit-box（多行），且元素为块级；缺一不可。
用 text-overflow: ellipsis 需要同时满足三个条件
只写 text-overflow: ellipsis 没用，浏览器根本不会生效。它必须和另外两个 CSS 声明一起出现：overflow: hidden 和 white-space: nowrap（单行场景），或者配合 display: -webkit-box（多行场景）。缺一个，文字该换行还是换行，该撑开容器还是撑开。
常见错误是只加了 text-overflow，然后发现没反应，再查文档又看到“仅对块级元素有效”，于是顺手加个 display: block——其实多数情况下默认就是 block，真正卡住的是那两个配套声明。
单行溢出隐藏的标准写法
适用于标题、列表项、按钮文字等明确要求单行显示的场景。注意顺序不重要，但三者必须共存：
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
white-space: nowrap阻止内部空格换行，让文本变成一条长线 -
overflow: hidden切掉超出容器的部分（否则ellipsis无处可落） -
text-overflow: ellipsis在截断位置插入省略号（仅支持单字节字符和部分 Unicode，中文完全 OK）
多行溢出隐藏只能靠 WebKit 方案
CSS 标准至今没定义多行 text-overflow，目前唯一可靠方案是使用 WebKit 私有属性，且只在 Chrome/Safari/Edge 新版本中稳定：
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 控制显示几行 */
overflow: hidden;
}
关键点：
-
display: -webkit-box是前提，不能用flex或grid替代 -
-webkit-line-clamp的值必须是整数，设为3就最多显示三行，超出部分被裁掉并隐式触发省略号（不需要显式写text-overflow） - Firefox 不支持该方案，如需兼容，得用 JS 计算行高 + 截字符串，或改用
clamp()配合max-lines（目前仍属实验性）
为什么加了样式还是不生效？检查这三点
最常被忽略的其实是容器本身的状态：
- 父容器没有设定固定宽度（比如
width、max-width或受 flex/grid 限制），overflow: hidden就没边界可“溢出” - 元素是 inline 级（如
<span></span>），而text-overflow要求块级上下文，加display: inline-block或block即可 - 用了
word-break: break-all或overflow-wrap: break-word，会优先折行，把ellipsis的机会抢没了
如果是在 Vue/React 组件里动态渲染，还要确认 class 名拼写正确、CSS 作用域没隔离错——有时候不是代码问题，是 DevTools 里看到的样式被更高优先级规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
