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
包裹在外即可解决问题。