-webkit-line-clamp需与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden联用才生效；缺一不可，且受父容器高度、盒模型、浏览器兼容性及周边样式影响。
-webkit-line-clamp 能用，但不是加了就生效——它必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 一起出现，缺一不可。
为什么写了 -webkit-line-clamp 却没截断
最常见原因是样式被覆盖或条件不全：
-
display: flex或display: grid会直接覆盖display: -webkit-box，导致整个机制失效 - 漏写
-webkit-box-orient: vertical：WebKit 下该属性缺失时，-webkit-line-clamp被忽略（不是截不断，是压根不进逻辑） -
overflow没设成hidden：文字会溢出容器，省略号也不显示 - 父容器没设固定高度或
max-height，且内部有padding/border干扰盒模型计算，可能造成行数判断偏移
移动端兼容性到底靠不靠谱
2026 年当前，iOS Safari 14+ 和主流安卓 WebView（Chrome 90+ 内核）基本都支持，但仍有硬伤：
- iOS 13 及更早系统：完全不识别
-webkit-line-clamp，连@supports都检测不到 - 部分华为/小米定制系统 WebView（尤其 X86 架构旧内核）：CSS 解析器跳过该属性，不报错也不生效
- Firefox：71+ 支持，但需用户手动开启
layout.css.line-clamp.enabled标志，生产环境不能依赖 -
@supports (-webkit-line-clamp: 2)在 Safari 15.4+ 才稳定，在旧版中可能返回 false 正面误判
怎么安全 fallback 到 JS 截断
纯 CSS 无法检测是否生效，必须用 JS 创建测试节点比对高度：
const testEl = document.createElement('div');
testEl.style.cssText = 'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100px; font-size: 14px; line-height: 1.5;';
testEl.textContent = '一二三四五六七八九十';
document.body.appendChild(testEl);
const clampedHeight = testEl.offsetHeight;
testEl.style.webkitLineClamp = '100';
const fullHeight = testEl.offsetHeight;
document.body.removeChild(testEl);
const supportsClamp = clampedHeight 0;
如果 supportsClamp 为 false，建议两种务实路径：
- 用
textContent+ 字符长度粗略截断（适合中文为主、字体一致的场景） - 用
getBoundingClientRect()动态测量真实渲染高度，逐字/逐词删减直到高度达标（开销稍大，但精度高） - 放弃自动截断，改用「收起/展开」按钮交互，更可控也更符合无障碍要求
别踩这些布局雷区
即使所有属性都写对，也可能因周边样式崩掉：
- 不要在
line-clamp元素上同时设height：它会和-webkit-line-clamp的行高计算冲突，导致截断行数不准 - 慎用
line-height非数值单位（如1.5em或150%）：不同浏览器解析差异可能让第 3 行刚好卡在临界点 - 避免嵌套
inline元素（如<span></span>、<em></em>）混排：某些 WebKit 版本中，它们会干扰行框生成，造成省略号位置异常或消失 -
text-overflow: ellipsis对多行无效，仅作用于单行；多行截断的省略号是-webkit-line-clamp自带的视觉效果，无需额外设置
真正麻烦的不是写法本身，而是当它在某台测试机上突然不工作时，你得快速判断：是 UA 伪装导致检测失效？是父容器 transform 触发了层叠上下文破坏了裁剪？还是那个隐藏的 margin-top: -1px 让第一行基准线偏移了？——这些细节，往往比语法本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
