微信小程序 富文本 换行问题 文本溢出使用省略号

》需求场景：由于有高亮的需求，所以选择用富文本的标签<rich-text>，同时还有个需求是希望展示两行，然后溢出的情况用省略号。

》解决思路：在nodes节点里面包一层div，然后设置该div的样式为显示两行，溢出文本用省略号显示。

》代码：

html：

<rich-text class="rich_text product-name" :nodes="item.productName | formatRich"></rich-text>

js：

filters: {
        formatRich(val){
            return "<div class='rich-layout' style='-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;white-space: pre-wrap;'>" + val + "</div>"
        }
    },