Taro 实现多行文本溢出省略效果

一、问题

　　在浏览器中实现多行文本溢出使用一下属性即可：

.text{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp:2;    
  -webkit-box-orient: vertical;
}

　　但是在Taro中使用的时候发现不起作用，后了解到可能样式css被编译后有些样式会被过滤掉，导致样式失效。

　　

二、解决办法

　　很简单，将样式直接写成行内样式就好了

　　

<View
   className='item_title'
   style={{
      display: '-webkit-box',
      overflow: 'hidden',
       '-webkit-line-clamp': 2,
       '-webkit-box-orient': 'vertical',
    }}
>
    {item.title}
</View>

　　　效果图：

       

 

 

 

　　参考资料：https://developers.weixin.qq.com/community/develop/doc/000606c1fcc1b0fde7d911baf51800?_at=1581941638459