-webkit-line-clamp是唯一纯CSS实现移动端多行省略的可靠方案，需严格搭配display: -webkit-box、-webkit-box-orient: vertical及明确max-height才能生效，且仅限WebKit内核浏览器。
-webkit-line-clamp 是唯一能用纯 CSS 实现移动端多行文本省略的可靠方案，但它只在 WebKit 内核浏览器（Chrome、Safari、Android WebView）中生效，Firefox 和部分旧版 UC/QQ 浏览器不支持。
为什么 -webkit-line-clamp 必须搭配 display: -webkit-box
因为 -webkit-line-clamp 本质是 -webkit-box 的一个属性，不是通用 Flex 或 Block 的能力。单独写 line-clamp: 2（无前缀）或只设 overflow: hidden + text-overflow: ellipsis 都无效——后者只对单行起作用。
必须同时满足三个条件：
display: -webkit-box-webkit-box-orient: vertical-
-webkit-line-clamp: N（N 为行数）
示例：
立即学习“前端免费学习笔记（深入）”；
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
iOS Safari 中文字截断异常怎么办
常见现象：中文末尾显示半个字、标点被吞掉、甚至整行错位。根本原因是 Safari 对中文字体排版和 -webkit-line-clamp 的行高计算耦合太紧。
缓解方法：
- 显式设置
line-height（如1.4），避免依赖默认值 - 确保父容器有明确
max-height（例如max-height: 2.8em），且与line-height × 行数匹配 - 慎用
font-size动态缩放（如vw单位），会导致行高计算漂移 - 若仍异常，可加
word-break: break-word强制换行，但可能破坏语义断行
需要兼容 Firefox 或低版本 Android 怎么办
没有纯 CSS 方案。必须降级为 JavaScript 方案，核心逻辑是：获取元素 DOM、逐字符/逐词截断、用 scrollHeight > clientHeight 判断是否溢出。
实操建议：
- 优先检测
getComputedStyle(el).webkitLineClamp是否存在，有则走 CSS；否则走 JS - 不要用「删一个字测一次高度」的暴力法，性能差。改用二分法找临界长度
- 监听
resize和字体加载完成（document.fonts.ready）后重算，否则动态内容或字体加载延迟会漏处理 - 注意 SSR 场景：服务端渲染时 JS 不可用，需预留 fallback 文本长度（如限制 100 字符 + 省略号）
最易被忽略的是：移动端 viewport 缩放、系统字体大小设置（如 iOS「更大字体」辅助功能）、以及第三方字体加载延迟，都会让 -webkit-line-clamp 的实际截断位置偏移。上线前务必在真机上用不同字号+缩放组合验证。
