多行文本超出省略

利用css3的line-clamp属性可以设置超出指定行数显示省略号。

.line-camp( @clamp: 3 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    -webkit-box-orient: vertical; 
}

但是，在使用webpack打包的时候，-webkit-box-orient: vertical会被删除掉，主要是因为optimize-css-assets-webpack-plugin插件的问题。

可以使用如下办法来以防删除。

.line-camp( @clamp: 3 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}