.pro-name {
@include multi-text-overflow-ellipsis(2);
}
@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
display: -webkit-box;
-webkit-line-clamp: $line-to-show-number;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
在开发过程中 发现代码不生效 查到在taro2以上需要添加
/* !autoprefixer: off /
/ autoprefixer: on */
不然会自动过滤 -webkit-box-orient: vertical;属性
@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
display: -webkit-box;
-webkit-line-clamp: $line-to-show-number;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
}
模拟器中看效果生效了 于是发布小程序给测试人员,结果得到反馈商品名称全部出来了。 于是build项目查看果然又被再次过滤了,到处查
最后。。。。。解决办法就是加了在/* autoprefixer: off */前加了个感叹号
成功解决!!!!
以下为最终代码,不要嫌弃人家啰嗦啦,嘻嘻~ 只是感觉真的很坑
@mixin multi-text-overflow-ellipsis($line-to-show-number: 2) {
display: -webkit-box;
-webkit-line-clamp: $line-to-show-number;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
}