-webkit-line-clamp需配合display:-webkit-box、-webkit-box-orient:vertical和overflow:hidden才生效，单独使用无效；仅WebKit内核支持，Firefox/IE不兼容；截断省略号仅单行有效，多行需用max-height精确控制；响应式下变量须为整数，含HTML标签时计算失效。
-webkit-line-clamp 是目前最直接的多行截断方案，但它不是独立属性，必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 配合使用，否则完全无效。
为什么只写 -webkit-line-clamp 没反应？
这个属性本身不触发任何渲染行为，它只是“告诉” WebKit 内核的布局引擎：在已启用的弹性盒模型中，最多显示几行。常见错误包括：
- 漏掉
display: -webkit-box—— 没有这个，-webkit-line-clamp形同虚设 - 写了
display: flex或display: grid后还加-webkit-line-clamp—— 两者互斥，flex/grid 下该属性被忽略 - 容器宽度不够或未设置
width/max-width—— 文本可能在第一行就因宽度不足而换行并被截断 - 父元素设置了
height固定值且小于计算高度 —— 会和-webkit-line-clamp冲突，导致截断错乱
-webkit-line-clamp 在不同浏览器中的表现差异
它本质是 WebKit 私有属性，现代 Chromium 和 Safari 原生支持，但 Firefox 和旧版 Edge 行为不一致：
- Chrome 25+、Safari 6.1+、Edge 79+（Chromium 版）：完全可用，无需额外前缀
- Firefox：曾尝试支持
line-clamp标准属性（无前缀），但需手动开启layout.css.line-clamp.enabled，生产环境不可靠；-moz-box方案效果不稳定，不建议使用 - IE 全系列：彻底不支持，连降级逻辑都应绕过它
因此，实际项目中推荐用 @supports 检测，而不是依赖用户代理判断：
立即学习“前端免费学习笔记（深入）”；
@supports (-webkit-line-clamp: 2) {
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
如何避免省略号、只做干净截断？
如果设计要求“到第 N 行就硬切，不显示 …”，就不能依赖 text-overflow: ellipsis —— 它只对单行生效，多行下无效且可能干扰布局。
- 去掉
text-overflow，改用精确高度控制：line-height× 行数 =max-height - 确保容器没有 padding-bottom / border-bottom 等额外占用高度的样式
- 字体变化时，
line-height必须用相对单位（如1.4或em），避免 px 值失配 - 示例：3 行截断，
line-height: 1.5→max-height: calc(1.5em * 3)，再配overflow: hidden
响应式场景下动态调整行数的坑
用 CSS 变量 + JS 切换 --lines 看似优雅，但要注意：
-
-webkit-line-clamp不支持 calc() 或表达式，只能接收整数，变量必须是纯数字（如var(--lines)不能是calc(var(--lines) + 1)） - 移动端横竖屏切换时，若宽度变化导致行高重排，仅改行数变量可能来不及重绘，建议配合
resize或orientationchange事件手动触发 class 切换 - SSR 渲染时，服务端无法识别
-webkit-前缀，首次渲染可能不生效，需确保客户端 hydration 后立即应用样式
真正容易被忽略的是：当文本含 <br>、<span> 或内联样式时，-webkit-line-clamp 的行数计算会失效 —— 它只对纯文本流有效，复杂 DOM 结构请改用 JS 截断或伪元素遮罩方案。
