line-clamp仅WebKit内核支持，Firefox和IE无纯CSS方案；需同时设置display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp，配合overflow: hidden及合理max-height与line-height。
line-clamp只在WebKit内核生效，Firefox和IE完全不支持
直接写 display: -webkit-box; -webkit-line-clamp: 2; 在Chrome/Safari里能用，在Firefox里毫无反应，IE更不用提——它连 -webkit- 前缀都不认。这不是写法错，是浏览器能力边界问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical，三者缺一不可 - 元素需有明确宽度（比如
width或父容器约束），否则-webkit-line-clamp不触发 - 不能用于
inline元素，得是block或inline-block - Firefox用户只能靠 JS 模拟（比如截取字符+加“…”），没有纯CSS方案
文字被截断但没显示省略号？检查 overflow 和 text-overflow
常见现象：两行文字确实被卡住了，但末尾干干净净，没出现 …。大概率是漏了 overflow: hidden 或 text-overflow: ellipsis ——注意后者只对 block 或 inline-block 的单行有效，而 line-clamp 场景下真正起作用的是 overflow: hidden。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden是强制裁剪的开关，没它，文字会撑开容器或溢出 -
text-overflow: ellipsis在多行场景下只是“心理安慰”，实际不生效，别依赖它 - 确保行高
line-height合理，否则第二行底部可能被overflow: hidden切掉半截字
line-clamp设为2却只显示一行？可能是高度或行高冲突
典型错误：明明写了 -webkit-line-clamp: 2，结果只看到一行，甚至文字还换行了。根本原因是容器高度被其他样式锁死，或者 line-height 太大导致两行实际高度超出了容器可用空间，overflow: hidden 直接把第二行吞了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免给容器设固定
height，优先用max-height，例如max-height: calc(1.5em * 2) -
line-height推荐用无单位数值（如1.5），别用px或em套嵌，容易算错 - 如果用了
padding，记得从max-height里减掉，不然空间不够
服务端渲染或SSR中line-clamp失效？因为JS未介入时DOM未就绪
在 Next.js、Nuxt 等框架里，页面直出时 CSS 已加载，但 -webkit-line-clamp 依赖元素真实渲染后的行数计算。如果服务端生成的 HTML 中文字长度不确定，或字体加载延迟，客户端首次渲染仍可能闪动或截断异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要指望 SSR 阶段完美呈现省略效果，它本质是客户端渲染特性
- 字体加载完成前可先用
font-display: optional降低阻塞，或加fallback字体保底行高 - 极端要求一致性时，宁可用后端截断逻辑（如按字符数 + Unicode 宽度估算），也别强求纯CSS
line-clamp看着简单，但每一步都卡在浏览器实现细节和布局计算上，真要稳，就得接受它是个“尽力而为”的特性，不是开关一开就万事大吉。
