多行文本溢出必须用 display: -webkit-box，因为 -webkit-line-clamp 依赖该盒模型才能生效；漏写或替换为 flex/grid 将导致截断失效，且需配合 -webkit-box-orient: vertical 和 overflow: hidden。
多行文本溢出必须用 -webkit-box 吗
不是必须，但这是目前最轻量、最可控的纯CSS方案。它依赖 display: -webkit-box 触发盒模型重排，再靠 -webkit-line-clamp 限制行数。没有这个 display 值，-webkit-line-clamp 直接失效 —— 这不是 bug，是规范要求。
常见错误现象：加了 -webkit-line-clamp: 2 却没效果，八成是因为漏写了 display: -webkit-box 或写成了 display: flex。
-
display: -webkit-box是前提，不能替换成display: block或display: grid -
-webkit-box-orient: vertical必须显式声明，不能省略 -
overflow: hidden仍需保留，否则裁剪不生效
line-clamp 在 Firefox 中不生效怎么办
Firefox 直到 2025 年底才正式支持标准 line-clamp（无前缀），此前只认 -webkit-line-clamp。这意味着在旧版 Firefox 中，纯 CSS 多行省略必然 fallback。
如果你的项目需要兼容 Firefox 115 及更早版本，别硬扛，直接上降级方案：
立即学习“前端免费学习笔记（深入）”；
- 用
max-height+line-height估算高度（例如line-height: 1.4em; max-height: 4.2em;表示最多 3 行） - 配合
overflow: hidden和伪元素::after手动叠加省略号（需确保父容器position: relative） - 避免对
flex或grid子项直接套用-webkit-line-clamp，它在这些上下文中不可靠
为什么容器宽度影响多行省略效果
-webkit-line-clamp 不管宽度，但它依赖换行计算 —— 而换行由容器实际宽度决定。如果容器没设宽，或被父级撑开（比如 width: auto 的 div 在 flex 容器里），文本可能根本不会折行，导致 line-clamp 看似“没反应”。
典型场景：卡片标题放在 flex: 1 的区域里，没设 min-width 或 max-width，结果省略号永远不出现。
- 必须给容器明确的宽度约束：
width、max-width、flex-basis或inline-size - 在响应式布局中，建议用
max-width: 100%而非固定像素，防止小屏下文字过早截断 - 表格单元格要额外加
table-layout: fixed，否则宽度计算会失准
text-overflow: ellipsis 在多行里能单独用吗
不能。text-overflow: ellipsis 在多行场景下完全无效 —— 它只响应单行溢出，且必须搭配 white-space: nowrap。一旦你允许换行（比如默认的 white-space: normal），这个属性就彻底失活。
有人试图用 white-space: normal + text-overflow: ellipsis 实现多行省略，结果只是让文本正常换行、溢出部分裸奔显示。这不是浏览器 bug，是 CSS 规范明确限定的行为。
- 多行省略必须绕过
text-overflow，改用-webkit-line-clamp或高度裁剪 - 即使现代浏览器已支持无前缀
line-clamp，也依然不兼容text-overflow的多行模式 - 若需可访问性支持（如 screen reader 读出完整文本），得额外加
aria-label或隐藏完整内容节点
