微信小程序 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 包裹在外即可解决问题。