Taro 多行文本省略不生效

使用Taro框架写多行省略的时候,发现不生效 ???

想要的效果

Taro 多行文本省略不生效_第1张图片
实现效果.png

实际效果,没有省略


Taro 多行文本省略不生效_第2张图片
实际效果.png

附上我们正常能在普通H5项目生效的css多行省略样式

.desc {
   width: 480px;
   font-size: 20px;
   line-height: 28px;
   padding-top: 17px;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   word-wrap: break-word;
   white-space: normal !important;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

这在普通项目是没问题的,但是Taro框架编译之后,我们发现浏览器上是没有看到
-webkit-box-orient: vertical; 这句样式的

Taro 多行文本省略不生效_第3张图片
image.png

最后去Taro社区查了一下 ,果然有人碰到过这个问题

官方客服给出的解决方案是:

  • 方法1:
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
  • 方法2:
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

两种方式都是加入css注释强制声明忽略下一行,防止被编译过滤

你可能感兴趣的:(Taro 多行文本省略不生效)