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

时间：2020-03-29 12:14:53 阅读：191 评论：0 收藏：0 [点我收藏+]

一、问题

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

.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

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

原文：https://www.cnblogs.com/yang-shun/p/12591503.html

踩

(0)

评论一句话评论（0）