如何实现多行文本的跨浏览器省略截断效果？

我之前做项目时也碰到过一模一样的头疼问题：想让超过指定行数的文本自动用省略号截断，但原生的text-overflow: ellipsis只对单行生效，而line-clamp属性在IE、旧版Edge以及Firefox里完全不工作，折腾了好一阵才找到这个纯CSS的靠谱方案，分享给你。

核心问题梳理 #

• text-overflow: ellipsis仅支持单行文本截断，多行场景直接失效
• line-clamp属性兼容性极差，无法覆盖IE、Edge（旧版）和Firefox浏览器

兼容所有浏览器的SCSS混合宏方案 #

这里给你一个经过实际项目验证的SCSS混合宏，能完美实现多行文本截断需求，兼容几乎所有主流浏览器：

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white) {
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;

  &::before {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
  }

  &::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

混合宏使用示例 #

只需要在目标元素上调用这个混合宏，传入对应参数即可：

• $lineHeight：每行文本的行高，默认值1.2em
• $lineCount：允许显示的最大行数，默认值1行
• $bgColor：用来覆盖多余文本的背景色，需和父元素背景色一致，默认值白色

比如要让段落最多显示3行，行高1.5em，背景色为#f5f5f5：

.multi-line-desc {
  @include multiLineEllipsis(1.5em, 3, #f5f5f5);
}

方案原理说明 #

这个混合宏通过几个关键步骤实现兼容：

1. 用max-height限制容器高度（行高×行数），超出部分直接隐藏
2. 利用::before伪元素在容器右下角添加省略号
3. 用::after伪元素设置一个和背景色一致的小方块，盖住省略号后方可能露出的半截文字，保证省略号显示完整

这样处理后，不管是IE还是其他浏览器，都能完美展示多行文本截断的效果！

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