多行文本超出省略

该文章由 leevare 发布于 ,归类于 HTML/CSS

利用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 */
}

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒