微信小程序 rich-text 超过 2 行显示省略号

rich-text(富文本),如果想实现文本超过两行变成省略号,常规的 div 可以实现,但因为是在微信小程序中,同时使用的是 rich-text 返回的是富文本,所以不能简单的使用以下代码实现:

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

因为富文本使用的 rich-text 回显的,想着直接对这个标签写上这个 CSS,发现也无法达到想要的效果。Android 真机可以正常显示,在模拟器上也能正常变成省略号,但 iOS 真机不兼容。

解决办法

在回显的 rich-text 中包裹一层 div,在这个包裹层中写上样式,就可达到超过两行隐藏的效果。

<rich-text style="word-wrap: break-word;word-break: break-all;" nodes="<div style='text-overflow:ellipsis; -webkit-box-orient:vertical;-webkit-line-clamp:2; overflow: hidden; display: -webkit-box;'>{{assetInfo.description}}</div>"></rich-text>

如上演示加粗部分就是需要手工增加的内容,手工在数据外加一层 div 包裹在外即可解决问题。