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


登录后回复