-webkit-line-clamp 是当前最可靠、最轻量的纯 css 多行截断方案，但必须与 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 成套使用，且 firefox 默认不支持；text-overflow: ellipsis 仅对单行生效，因其依赖 white-space: nowrap 锁定渲染流，多行下失去截断上下文。
直接结论：用 -webkit-line-clamp 是当前最可靠、最轻量的纯 CSS 多行截断方案，但必须成套使用、不能单独生效，且 Firefox 默认不支持。
为什么 text-overflow: ellipsis 对多行无效？
它只作用于单行文本渲染流，依赖 white-space: nowrap 锁定一行。一旦允许换行（white-space: normal），text-overflow 就失去上下文，浏览器不知道“第几行末尾该加省略号”。这不是 bug，是规范限定行为。
常见错误现象：text-overflow: ellipsis 写了，overflow: hidden 也写了，但文字就是不截断——八成是因为漏了 white-space: nowrap，或者用了 flex 布局却没设 min-width: 0 导致宽度计算失效。
-webkit-line-clamp 必须成套使用的三个关键属性
单独写 -webkit-line-clamp: 2 没用，它只是“开关”，真正起作用的是下面这组组合：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
display: -webkit-box：启用旧式弹性盒模型（不是现代display: flex） -
-webkit-box-orient: vertical：让子元素（即文字行）垂直堆叠 -
overflow: hidden：必须加在同一个元素上，否则溢出内容仍可见
注意：text-overflow: ellipsis 在这里可选，但加上后省略号位置更准；line-height 要显式设置，否则行高由字体决定，-webkit-line-clamp 的行数可能不准。
响应式切换时最容易忽略的两个点
想在小屏显示 2 行、大屏显示 3 行？光改 -webkit-line-clamp 值不够，还得同步处理：
-
white-space必须跟着切换：小屏用nowrap（单行逻辑），大屏切回normal（多行逻辑），否则多行规则被锁死 - 容器宽度变化时，如果用了
flex布局，子元素要加min-width: 0，否则width或max-width限制可能被忽略，导致截断失效
Firefox 完全不支持 -webkit-line-clamp，如需兼容，得用 max-height + line-height 计算高度的降级方案，但会因字体缩放、行内元素（如 <strong></strong>）导致行高浮动而失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
