-webkit-line-clamp 仅在 Chrome、Safari、Edge（Chromium版）等 WebKit/Blink 内核浏览器中有效，Firefox 和旧版 Edge 不支持，需配合 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 及 max-height 才能生效。
line-clamp 在哪些浏览器能用
-webkit-line-clamp 是 WebKit 内核专属属性，Chrome、Safari、Edge（新版）都支持，Firefox 完全不认。如果你的项目必须兼容 Firefox，光靠这个属性会直接失效——它不会报错，但也不会截断，文本照常撑开。
常见误判是看到 Chrome 里效果正常就以为“能用”，结果上线后用户反馈 Firefox 下排版崩了。别依赖 UA 判断，更稳妥的做法是：对 Firefox 单独用 JavaScript 模拟截断（比如按字符数 + textContent 截取 + 插入 "…"），或者改用 Flex + height + overflow: hidden 的降级方案（但无法精确控制“两行”）。
为什么只写 line-clamp 不生效
很多人复制了 -webkit-line-clamp: 2 就以为完事了，结果毫无反应。这是因为该属性必须配合三个前提条件才起作用：
-
display必须是-webkit-box或-webkit-inline-box -
-webkit-box-orient必须设为vertical - 元素必须有明确的高度限制（比如
max-height或固定height），否则盒子无限伸展，截断无从谈起
漏掉任意一条，-webkit-line-clamp 都是摆设。建议写成组合块，避免拆开维护：
立即学习“前端免费学习笔记（深入）”；
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 3.6em; /* 1.8em × 2 行，留点余量 */
}两行省略号在响应式下容易出问题
用 max-height 配合行高算死值（比如 3.6em）在字号缩放或字体替换时会失准。例如用户系统字体设为“大号”，或页面启用可访问性缩放，1.8em 实际像素变大，两行可能只显示 1.7 行就截断，甚至把字劈成两半。
更鲁棒的做法是：
- 用
line-height和font-size的相对单位保持比例，比如统一用em或rem - 给
max-height留 0.2–0.4em 余量，防止因小数像素渲染差异导致最后一行被切掉顶部 - 避免在
line-clamp元素上同时用padding或border，它们会挤占可用高度，让实际可显示行数少于预期
React/Vue 中动态控制行数要注意什么
如果行数由 props 或 state 控制（比如 lines={props.lineCount}），别直接拼字符串写 -webkit-line-clamp。CSS-in-JS 库如 styled-components 或 Vue 的 :style 绑定中，要确保生成的内联样式包含全部必要声明：
<div :style="{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lineCount,
overflow: 'hidden',
maxHeight: `${lineCount * 1.8}em`
}">注意：WebkitLineClamp 是驼峰写法，而 WebkitBoxOrient 首字母大写——漏掉 Webkit 前缀或大小写错误，样式就挂了。另外，服务端渲染（SSR）时这段样式不会生效，因为 WebKit 属性在 Node 环境无意义，得等客户端 hydration 后才加载，首次渲染仍会溢出。
真正难搞的不是写出来，是它和字体加载、行高计算、zoom 缩放、无障碍设置之间那些隐性冲突。多测几个真实设备和系统设置，比多写三行 CSS 更管用。
