微信小程序 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,在这个包裹层中写上样式,就可达到超过两行隐藏的效果。文章来源:https://www.toymoban.com/news/detail-775280.html
<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 包裹在外即可解决问题。文章来源地址https://www.toymoban.com/news/detail-775280.html
到了这里,关于微信小程序 rich-text 超过 2 行显示省略号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!