『vue踩坑日常』处理多行文本遇到的Bug
2018.06.21
小林同學
前端
 热度
℃
处理多行文本的问题的时候一般都会用到
-webkit-box-orient: vertical
这个属性
1 2 3 4 5 6 7 8 9 10 11
| p { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; color: #1d1d1d; line-height: 17px; }
|
正常情况下出现的样式应该是下面这样的
本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了,于是就会出现下面的样式问题
在网上查找资料的时候看到这个小哥说的
这个出现的原因是因为用optimize-css-assets-webpack-plugin
这个插件打包css压缩的时候,会导致它出现问题而不渲染,所以选择渲染禁用掉这一行的autoprefixer
1 2 3 4 5 6 7 8 9 10 11 12 13
| p { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ font-size: 12px; color: #1d1d1d; line-height: 17px; }
|
再运行,ok