Taro多行文本省略不生效
-
使用Taro框架编译成小程序发现多行省略不生效。。。
多行文本省略:
.textHide { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; text-overflow: ellipsis; overflow: hidden; }
经过Taro编辑后小程序端少了
-webkit-box-orient: vertical;
这条样式属性应该是样式css被编译后某些样式会被过滤掉
解决方法
方法1:
/* autoprefixer: ignore next */ -webkit-box-orient: vertical;
方法2:
/* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */
方法3:
<View style={{ display: '-webkit-box', '-webkit-box-orient': 'vertical', '-webkit-line-clamp': 2, 'text-overflow': 'ellipsis', overflow: 'hidden', 'line-height': 2 }} > 这是要省略的内容这是要省略的内容这是要省略的内容 </View>
方法1和方法2是加入css注释强制声明忽略下一行,防止被编辑过滤
方法3是直接写成行内样式
转载自:_Jester 的《Taro多行文本省略不生效》 https://blog.csdn.net/qq_41049816/article/details/107021134