-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;
}