没有真正“全浏览器统一”的纯CSS多行省略号方案；单行可用text-overflow: ellipsis（需white-space: nowrap、overflow: hidden、明确宽度）；多行依赖-webkit-line-clamp（非标准，需display: -webkit-box等四属性）。
没有真正“全浏览器统一”的纯CSS多行省略号方案。单行可以做到近乎全覆盖，多行必须接受兼容性妥协或引入JavaScript兜底。
单行省略号：text-overflow: ellipsis 能用就用
这是唯一能放心交给CSS处理的场景。三个属性缺一不可，且顺序无关紧要：
-
white-space: nowrap—— 没它就不是单行，text-overflow直接失效 -
overflow: hidden—— 不隐藏，溢出内容照常显示，省略号不会出现 -
text-overflow: ellipsis—— 值必须是ellipsis（不能拼错），clip不显示省略号 - 容器必须有明确宽度约束：
width、max-width或flex-basis；width: auto或未设宽的inline元素必然失败 - 对
、无效；对等内联元素需加display: inline-block或block
多行省略号：-webkit-line-clamp 是主流但非标准
Chrome、Edge（新版）、Safari 和 Firefox 68+ 都支持，但它仍是 WebKit 私有属性，不是 W3C 标准。用法非常固定：
- 必须写全这四条：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden -
-webkit-line-clamp只接受整数，不支持2.5或calc() - 无法控制省略号出现在哪一行末尾——它总在第 N 行末尾截断，哪怕第 N 行只写了两个字
- Firefox 旧版本（
需要真正跨浏览器时：别硬扛，该用JS就用JS
当产品要求在 IE11、老版 Firefox、低版本安卓 WebView 中也显示省略号，纯CSS方案已到极限。此时推荐轻量级 JS 截断逻辑：
- 监听容器
resize和文本内容变化（如 Vue/React 的响应式更新） - 用
getComputedStyle(el).lineHeight获取行高，乘以目标行数得最大允许高度 - 逐字符或逐词截断 +
el.scrollHeight > maxHeight判断是否溢出 - 避免在
scroll或input频繁事件中直接调用，加防抖（setTimeout） - 不推荐用
clientHeight判断——它受border、padding影响，易误判
最常被忽略的一点：多行省略号在 Flex/Grid 容器中容易失效，因为默认 min-width: auto 会撑开项目宽度。务必给文字容器加 min-width: 0 或 overflow: hidden 来重置最小尺寸约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
