【微信小程序】富文本多行溢出显示省略号(扩展一下flex/text溢出显示）

前言

对于展示的Html字符串内容，需要限制其行数。

实现

给内容加一下溢出的样式。

<rich-text class="xxx"
nodes="<div style='text-overflow:ellipsis;'>{{html}}</div>" 
></rich-text>

.xxx{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
height: 120rpx;
}

扩展的问题

text 使用上面的方法就不生效，但是view就是可以的。
flex布局文字溢出显示省略号失效的解决方法：套上一层span
微信小程序之text文本超出隐藏超出部分用省略号表示:还没验证过可以不可以。

参考

小程序rich-text多行省略

升级1：过滤掉换行空格之类的

使用正则对内容进行处理。

参考：微信小程序rich-text里面写多行溢出显示省略号在ios中不显示的问题