如何替代-webkit-line-clamp属性以实现Firefox浏览器兼容

你当前使用的-webkit-line-clamp是webkit内核浏览器的私有属性，Firefox不支持该前缀属性，以下是两种可行解决办法：

方法一：使用标准CSS属性（兼容Firefox 68+） #

现在Firefox 68及以上版本已支持标准的line-clamp属性，只需补充标准属性即可实现跨浏览器兼容，同时保留webkit前缀兼容Chrome等内核浏览器：

.text-truncate {
  overflow: hidden;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

方法二：降级方案（兼容旧版Firefox） #

若需兼容更早版本的Firefox，可通过固定容器高度+伪元素的方式实现，前提是文本行高固定：

.text-truncate {
  position: relative;
  height: 44px; /* 行高22px × 2行，根据实际行高调整 */
  overflow: hidden;
  line-height: 22px;
  padding-right: 1em; /* 给省略号预留空间 */
}

.text-truncate::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff; /* 需与容器背景色一致，避免遮挡文本 */
}

注意：如果文本刚好占满两行，伪元素可能会覆盖最后几个字符。可通过JavaScript判断文本实际高度是否超过容器高度，动态控制伪元素的显示状态。

内容的提问来源于stack exchange，提问作者peace3106