实现一行或多行文本溢出省略效果的常用方法

该方法在 IE 中不兼容，但 Edge 和新版 Firefox 已支持 Webkit 前缀。

若需兼容旧版 IE 且文字一定溢出，可采用渐变遮罩折中方案：

.ellipsis-ie {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
.ellipsis-ie::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: linear-gradient(to right, transparent, #fff 55%);
}

思路是使用渐变透明图层覆盖末尾，算是一种折中方案，但效果有限。

CSS 能力有限，如需完美实现可借助 JavaScript。GitHub 上有 clamp.js 专门解决此类问题：

// 官方示例如下

// 单行
$clamp(myHeader, {clamp: 1});

// 多行
$clamp(myHeader, {clamp: 3});

// 根据可用高度自动省略
$clamp(myParagraph, {clamp: 'auto'});

// 根据固定元素高度自动省略
$clamp(myParagraph, {clamp: '35px'});