line-clamp 是 WebKit 专属的多行文本截断属性，需配合 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 和 text-overflow: ellipsis 才生效；Firefox/IE 不支持，须用 JS 或降级方案。
line-clamp 能直接实现多行文本截断加省略号，但只在启用了 WebKit 引擎的浏览器（Chrome、Safari、Edge 16+）中原生有效；Firefox 和旧版 Edge 需要 fallback 方案。
line-clamp 是什么，为什么不能单独用
line-clamp 是 display: -webkit-box 的配套属性，不是独立 CSS 规则。它必须和 -webkit-box-orient: vertical、overflow: hidden、text-overflow: ellipsis 配合才能生效——漏掉任意一个，省略号都不会出现。
常见错误现象：line-clamp 写了但没效果，或只截了 1 行（实际想截 2–3 行），大概率是 display 没设成 -webkit-box，或者父容器高度/最大高度限制冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写全这组声明（缺一不可）：
display: -webkit-box;<br>-webkit-box-orient: vertical;<br>-webkit-line-clamp: 2;<br>overflow: hidden;<br>text-overflow: ellipsis;
-
-webkit-line-clamp值为整数，不支持小数或max-content等关键字 - 避免同时设置
height或max-height（除非你明确控制行高并计算出像素值），否则可能提前截断或撑开容器
Firefox 和 IE 兼容性 fallback 怎么写
Firefox 完全不识别 -webkit-line-clamp，IE 则连 -webkit-box 都不支持。纯 CSS 无通用解法，必须降级处理：要么放弃省略号（仅靠 max-height + overflow: hidden 截断），要么用 JS 动态截取。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果允许视觉降级，可只对 WebKit 浏览器启用
line-clamp，Firefox 显示完整文本或用max-height粗略截断 - 若必须统一表现，推荐轻量 JS 方案：获取元素
scrollHeight与clientHeight对比，逐字截断 + 插入…，注意避开 HTML 标签文本（如用textContent而非innerHTML） - 慎用基于
readMore展开的“伪省略”——它依赖 JS 控制显隐，不属于真正意义上的 CSS 截断
line-clamp 在 flex / grid 容器里失效怎么办
当文本容器是 display: flex 或 display: grid 的子项时，-webkit-box 布局会被覆盖，导致 line-clamp 失效。这不是 bug，而是 CSS 显示模式互斥的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把需要截断的文本包一层
<div>，该内层设为display: -webkit-box，外层 flex/grid 保持原样 - 不要尝试给 flex item 直接加
display: -webkit-box——多数情况下它会破坏主轴对齐或尺寸计算 - 若使用 Tailwind 等工具类框架，注意
line-clamp工具类（如line-clamp-2）内部已封装好完整声明，但仍需确认其是否包裹了独立容器
最易被忽略的一点：line-clamp 对字体变化敏感。当用户调整系统字号、页面缩放或使用自定义字体时，行高可能浮动，导致实际显示行数偏差。如果产品对排版精度要求高（比如新闻卡片、商品标题），建议在关键场景做真机或缩放测试，而不是只看开发环境下的 Chrome 表现。
