-webkit-box实现多行文字溢出显示

最近看得到的web端首页时，发现一个有一段文字描述超过指定行数后显示省略号。效果如下：

查看它的源码，关键代码如下（每一段的最后5行）： 

.news-list .single-news .news-intro .news-title {
    font-size: .293333rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-list .single-news .news-intro .news-detail {
    font-size: .213333rem;
    line-height: .333333rem;
    padding-top: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}