text-overflow: ellipsis 仅支持单行省略，多行无效是设计使然；它只响应单行水平溢出，需 white-space: nowrap、overflow: hidden 和明确宽度配合，换行即失能；多行须用 -webkit-line-clamp（需 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden 四件套），但 firefox 等不支持，需 js 或服务端降级。
text-overflow: ellipsis 只对单行生效，多行场景下它根本不会触发——这不是 bug，是设计如此。
为什么 text-overflow: ellipsis 在多行里完全没反应
它只监听「单行水平溢出」：必须配合 white-space: nowrap + overflow: hidden + 明确宽度。一旦允许换行（比如 white-space: normal），text-overflow 就彻底失能——它不检查第 2 行有没有溢出，也不管容器高度是否够用。
常见失效现象：
- 加了
text-overflow: ellipsis但文字照常换行撑开容器 - 设了
height: 60px+overflow: hidden，结果下面几行被裁掉，末尾没省略号 - 在 Firefox 中完全不显示省略号，控制台也无报错（因为
-webkit-line-clamp是私有属性）
-webkit-line-clamp 的最小可用组合
这是目前最接近“纯 CSS 多行省略”的方案，但必须四件套齐备，漏一个就白配：
-
display: -webkit-box：不能用flex或grid替代，加了前缀也不行 -
-webkit-box-orient: vertical：必须显式写，不是默认值 -
-webkit-line-clamp: 3：整数，表示最多显示几行 -
overflow: hidden：没有它，省略号不会出现
另外，容器必须有明确宽度约束（width、max-width 或父容器限制），否则计算逻辑可能跳过截断。
Firefox 和旧版 Safari 怎么办
它们不支持 -webkit-line-clamp，也没有等效的原生 CSS 方案。所谓“兼容写法”只是自我安慰，真实选择只有两个：
-
JS 截断：用
scrollHeight和line-height推算行数，手动截字符串 + 拼"…"；注意字体加载延迟、缩放、中英文混排会让行高计算不准 -
服务端预处理：按字符数或字节数提前截断，后端拼好
"…"再返回；适合静态内容或更新频率低的卡片摘要
别碰伪元素模拟、clamp() 函数或草案中的 line-clamp——要么不工作，要么破坏复制、选中或屏幕阅读器行为。
那个三行摘要看着干净，背后大概率藏着一行 if (isFirefox) {} 或一次后端字符串截取调用。跨浏览器的多行省略号，从来不是“CSS 能不能做”，而是你愿不愿意接受 JS 或服务端介入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
