盒子
盒子

『vue踩坑日常』处理多行文本遇到的Bug

处理多行文本的问题的时候一般都会用到
-webkit-box-orient: vertical这个属性

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;
}

正常情况下出现的样式应该是下面这样的

img

本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了,于是就会出现下面的样式问题

img

在网上查找资料的时候看到这个小哥说的

img

这个出现的原因是因为用optimize-css-assets-webpack-plugin这个插件打包css压缩的时候,会导致它出现问题而不渲染,所以选择渲染禁用掉这一行的autoprefixer

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

img

赞赏
扫一扫,支持小林同學
  • 微信扫一扫
  • 支付宝扫一扫