不是必须用-webkit-line-clamp，但它是目前唯一能纯CSS实现“按行数截断+末尾加省略号”的方案；其他纯CSS方式如max-height+overflow:hidden只能裁剪内容，无法自动添加省略号。
多行省略必须用 -webkit-line-clamp 吗？
不是必须，但它是目前唯一能纯CSS实现「按行数截断+末尾加省略号」的方案。其他纯CSS方式（比如靠 max-height + overflow: hidden）只能裁剪内容，无法自动加 … —— 浏览器根本不识别“这是第几行被截”，自然不会渲染省略符号。
-webkit-line-clamp 的三个硬性前提条件
这个属性看似一行就能写完，但漏掉任意一个都会失效：
-
display: -webkit-box：不能是flex、block或默认值，必须用这个旧版弹性盒 -
-webkit-box-orient: vertical：方向必须为vertical，写成horizontal或漏掉直接无效 -
overflow: hidden：和单行一样，没它就等于没设限制，文本照常溢出
示例代码：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
为什么 Firefox 和旧版 Edge 不显示省略号？
因为 -webkit-line-clamp 是 WebKit/Blink 内核专属属性，Firefox 使用 Gecko，IE/旧 Edge 使用 Trident，它们压根不解析这个前缀。这不是 bug，是标准缺失——CSS 规范至今没定义多行省略的原生语法。
如果你必须兼容 Firefox：
- 接受它不显示省略号（只做
overflow: hidden+max-height裁剪） - 用 JS 动态计算行高并截断字符串（但会破坏 SEO 和可访问性）
- 后端提前截断 + 加
…（最稳，但丧失响应式灵活性）
移动端真机上省略号突然不显示？检查这些点
很多开发者在 Chrome DevTools 里调好了，一上 iOS Safari 就失效，常见原因有：
- 父容器用了
display: flex且没设align-items: flex-start，导致子元素基线对齐干扰了-webkit-box布局 - 字体用了自定义 WebFont，但
@font-face加载完成前就渲染了，行高计算错位，-webkit-line-clamp失效 - 设置了
line-height但没同步调整max-height（虽然不影响省略号本身，但会让视觉留白异常）
最简单的验证方式：临时加 border: 1px solid red 看容器是否真的撑开到预期高度。
真正麻烦的不是写法，而是当设计要求“必须在所有浏览器都显示省略号”时，你得立刻放弃纯 CSS 方案——这时候没有银弹，只有取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
