line-clamp在某些浏览器不生效，是因为它仅WebKit内核支持，必须同时设置display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp，且需overflow: hidden、max-height等配合，缺一不可。
line-clamp 为什么在某些浏览器里完全不生效
直接写 line-clamp 却没反应，大概率是漏了两个强制配套样式：必须同时设置 display: -webkit-box 和 -webkit-box-orient: vertical。现代 CSS 的 line-clamp 是个“半前缀属性”——它只在 WebKit 内核下通过 -webkit-line-clamp 生效，而标准语法 line-clamp（无前缀）目前仅被 Chrome 125+、Firefox 128+ 等极新版本部分支持，生产环境仍应优先用前缀写法。
常见错误写法：div { line-clamp: 3; } → 无效
正确写法需三者共存：div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
为什么加了 line-clamp 还是不显示省略号
省略号（…）出现的前提是内容**真实溢出且被截断**。如果容器高度不够、字体大小过大、行高过小，或父元素设置了 overflow: visible，都会导致截断失败。
- 必须设置
overflow: hidden，否则截断逻辑不触发 - 容器不能有固定
height值（比如height: 60px），否则会和line-clamp冲突；应改用max-height配合足够大的值（如max-height: 3.6em，3 行 × 1.2 行高） - 确保文字没有换行符或
white-space: pre-wrap类样式干扰 - 避免父级设置了
contain: layout或transform，这些会创建新的层叠上下文并破坏截断渲染
line-clamp 在 Flex/Grid 容器里失效怎么办
当目标元素是 flex item 或 grid item 时，display: -webkit-box 会被覆盖，导致 -webkit-line-clamp 失效。这不是 bug，而是 display 层级冲突。
解决方式只有两种：
立即学习“前端免费学习笔记（深入）”；
- 把要限制行数的文本再包一层
<span>或<div>，并在该子元素上应用-webkit-box+-webkit-line-clamp - 放弃
line-clamp，改用 JavaScript 计算行高并手动截断（适合动态内容或兼容性要求严苛场景）
例如：<div class="item"><div class="clamp-text">长文本...</div></div>
然后只对 .clamp-text 设置 display: -webkit-box 等三件套。
line-clamp 的性能和可访问性隐患
视觉上省略了内容，但屏幕阅读器仍会读出全部文本——这会造成信息不对等。如果这是标题或关键摘要，建议补充 aria-label 或用 title 属性兜底。
另外，line-clamp 是纯渲染层截断，不修改 DOM。这意味着：
- 无法通过 JS 直接获取“是否被截断”状态（得靠比对
scrollHeight > clientHeight） - 响应式变化（如窗口缩放）时，不会自动重算行数，可能残留多余空白或突然多出一行
- 在打印样式表（
@media print）中默认失效，需单独重写
真正需要稳定控制行数的场景，比如卡片列表、新闻摘要，最好预留服务端截断 fallback，而不是全依赖 CSS。
