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