在展示页面效果的时候,尤其是移动端上的界面,我们经常会有需求,最多展示两行,其余用“...”代替。
于是,就产生了下面的样式:
.div {
text-align: left;
text-overflow: -o-ellipsis-lastline;overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
但是,相信有很多小伙伴和我一样,发现写了上面的样式,并没有产生 “...”的效果。
网上很多说是webpack打包造成的,但是我尝试了没有解决。后来,发现一种解决方案:
.div{
text-align: left;
text-overflow: -o-ellipsis-lastline;overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
没错,就是在它上下加这两段注释,参考连接 https://github.com/postcss/autoprefixer/issues/776
以上的注释还不能随便写哦。
autoprefixer只自动添加webkit,其他的不加