-webkit-line-clamp需与display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden配合使用，且剪裁上下文不能被overflow:visible/auto中断，否则截断失效；iOS Safari 15.4–16.3存在渲染偏差，Firefox 118及更早不支持该属性。
-webkit-line-clamp 必须和 -webkit-box 一起用，否则根本不会触发截断
写了 -webkit-line-clamp: 2 却发现盒子还是被撑开、高度不受控，大概率是漏了关键前提：这个属性不是独立生效的 CSS 规则，它只在 display: -webkit-box + -webkit-box-orient: vertical 的组合下才被浏览器识别为“多行截断意图”。Chrome、Safari、Edge（Chromium）都严格遵循这套机制。
常见错误包括：
- 只加
-webkit-line-clamp，没写display: -webkit-box和-webkit-box-orient: vertical - 父容器是
display: flex或display: grid，直接把-webkit-box往子元素上套——布局模式冲突，-webkit-box被忽略 - 容器设了
height（固定像素值），但行高不一致或字体缩放导致实际行数错位，反而提前截断或留白
实操建议：
- 必须在同一元素上写全这四条：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden - 优先用
max-height替代height，比如max-height: calc(1.5em * 3)，允许内容少于 N 行时自然收缩 - 如果文本在 flex 容器里，给文本外层再包一层 ，仅对这一层应用
-webkit-box布局overflow: hidden 必须写在同一个元素上，中间不能有 overflow: visible/auto 中断剪裁上下文
即使你把
overflow: hidden写在祖先容器上，只要中间某一层（比如一个 wrapper）设置了overflow: visible或overflow: auto，浏览器就会认为“剪裁上下文已断裂”，-webkit-line-clamp就会失效——文字照常溢出，省略号也不会出现。这不是 bug，是 CSS 渲染规范中“剪裁传播”的硬性规则。尤其容易发生在使用 UI 框架（如 Ant Design、Element Plus）时，它们的组件内部可能自带
overflow样式。实操建议：
- 用浏览器开发者工具检查目标元素及其所有父级的
overflow计算值，确认没有visible或auto打断链路 - 避免依赖框架组件默认样式来控制溢出，宁可显式重置：
overflow: hidden !important（仅限该元素） - 不要混用
text-overflow: ellipsis——它只对单行有效，加在多行场景里纯属冗余
iOS Safari 15.4–16.3 真机存在字形换行计算偏差，必须真机验证
模拟器测不出问题，但 iOS 15.4–16.3 的 Safari 在处理中英文混排、标点、全角字符时，
-webkit-line-clamp可能少截一行，或省略号位置偏移甚至完全不显示。这是 WebKit 引擎的已知渲染差异，不是你代码写错了。如果你的用户群仍有大量 iOS 16.x 设备（政企、教育场景常见），不能只靠视觉测试就上线。
实操建议：
- 在真机上用
console.log(element.scrollHeight, element.clientHeight)对比，确认是否真的截断 - 加
word-break: break-word或overflow-wrap: break-word，强制软换行，减少跨行判断误差 - 若必须强一致性，放弃
-webkit-line-clamp，改用max-height+ 固定line-height+overflow: hidden组合，至少能稳定控制高度（哪怕没省略号）
Firefox 兼容性不能靠前缀猜，118 及更早版本完全不识别 -webkit-line-clamp
Firefox 119+ 开始支持标准
line-clamp，但 118 及之前版本对-webkit-line-clamp和line-clamp都静默忽略——DOM 里文本完整存在，但页面上既不截断也不显示省略号。如果你的项目需覆盖政企内网等 Firefox 旧版本环境，这点必须明确处理。别指望“多写一个
line-clamp: 3”就能 fallback，浏览器根本不认。实操建议：
- 用
@supports (-webkit-line-clamp: 1) or (line-clamp: 1)做特性检测，而非 UA 判断 - 对不支持的环境，用轻量 JS 方案：读取
textContent，按行高 +getClientRects()测量可见行数，动态截断并插入… - 避免在
-webkit-box内嵌套、等 inline 元素，它们会干扰行盒生成，进一步加剧 Firefox 降级时的不可控性
真正麻烦的从来不是怎么写那几行 CSS，而是剪裁上下文是否连通、WebKit 版本是否踩中 bug、Firefox 用户是否被悄悄漏掉——这些细节一错，高度就失控。
- 用浏览器开发者工具检查目标元素及其所有父级的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
