多行文本超出省略

利用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 */
}
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。