-webkit-line-clamp 必须搭配 display: -webkit-box，因为该属性仅在 WebKit 弹性盒模型下生效；漏掉 display: -webkit-box 或 -webkit-box-orient: vertical 会导致属性被忽略，文本无法截断。
为什么 -webkit-line-clamp 必须搭配 display: -webkit-box？
因为 -webkit-line-clamp 本身不生效——它只是告诉 WebKit 内核“最多显示几行”，但前提是容器得是 WebKit 的弹性盒模型。如果只写 -webkit-line-clamp: 2 而没设 display: -webkit-box 和 -webkit-box-orient: vertical，浏览器直接忽略该属性，文本照常溢出。
常见错误包括：
- 漏掉
-webkit-box-orient: vertical，导致内容横向堆叠而非换行截断 - 用
display: flex替代display: -webkit-box，现代 Flexbox 不识别-webkit-line-clamp - 父容器有
overflow: visible或未设overflow: hidden，截断失效
Firefox 和 IE 怎么办？-webkit- 前缀不认
Firefox 官方从未实现 -webkit-line-clamp，IE 全系不支持。这不是“加个 -moz- 前缀”就能解决的事——它是 WebKit 专有行为，没有标准替代属性。
可行方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 降级为单行省略：
white-space: nowrap+text-overflow: ellipsis（兼容所有浏览器） - JavaScript 动态计算：获取
scrollHeight与容器clientHeight比较，手动截字符串 + 添加省略号（注意需监听字体加载、resize 等）
别信“CSS 变量 + calc() 模拟多行截断”这类方案——它只能隐藏内容，无法自动加省略号，且行高稍有浮动就错位。
为什么加了 text-overflow: ellipsis 还不显示省略号？
这个属性在多行场景下是“锦上添花”，不是“必要条件”。-webkit-line-clamp 自身已触发省略逻辑，text-overflow: ellipsis 主要起明确提示作用，并增强部分旧版 Safari 的渲染一致性。
真正卡住显示的往往是这些：
- 容器没设明确宽度（
width或max-width），导致行数计算失败 -
line-height不固定（比如用1.5而非1.5em），不同字号下截断位置漂移 - 内容里混了
<img alt="如何用CSS实现多行文本省略？" >、<span></span>等内联元素，破坏了纯文本流布局 - Bootstrap 类如
flex-grow-1或d-flex干扰了-webkit-box的盒模型行为
Bootstrap 项目里怎么安全加多行省略？
Bootstrap 5.3+ 的 flex 工具类会覆盖 display: -webkit-box，直接加 .multi-line-ellipsis 类可能失效。
必须先重置 flex 行为：
- 给目标元素加
min-w-0（强制最小宽度为 0，防止文本撑开） - 再加
flex-shrink-1（允许收缩）或显式写flex: 1 1 0 - 最后叠加你的省略类，确保
display: -webkit-box生效
验证是否成功：打开 DevTools → Computed 标签页 → 查 min-width 是否为 0px，再看 scrollWidth > width 是否成立——不成立说明没触发截断。
最麻烦的不是写对那几行 CSS，而是每次改完发现 Firefox 里全显示、Safari 里少半行、Android WebView 里省略号偏右——这些细节得靠真机调试，光看文档没用。
