小程序rich-text中-webkit-line-clamp失效正常显示的字符串内容是非html标签开头。如"内容：.

问题描述

目标：显示后段接口返回的字符串数据，并且默认只展示3行。

问题：使用<rich-text>组件渲染，使用-webkit-line-clamp:3实现默认展示3行。安卓手机的小程序都能够正常显示。但是IOS中有些能够正常展示，有些默认不展示。

解决思路

1.微信官方社区

很多人碰到这个问题

但是并没有解决方案

2.正则表达式

通过分析显示成功的字符串和非成功的字符串，可知：

正常显示的字符串内容是非html标签开头。如"内容：........"
异常显示的则是以html标签<div>或者<p>开头的字符串。如"<div>内容........</div>"

显示异常的内容，基本分为下面几种：

每行都是一个块级标签

"<div>内容标题：</div><div>1.内容1</div><div>内容2</div>"

各种标签嵌套

"<div><div>内容标题：</div><div>内容1</div><div>内容2</div></div>

通过正则表达式替换，将块级标签去除

最终解决方案

wxml代码

<rich-text class="my-class" nodes="{{myUtil.handleRichText(str)}}"  style="-webkit-line-clamp: {{showAll ? 'none' : '3'}}"></rich-text>

wxs代码

var handleRichText = function(str) {
   return str.replace(getRegExp('<div>(\s*)(↵*)<div>|<\/div>(\s*)<\/div>','g'), '<br/>').replace(getRegExp('(<div>|<p>)(\s*)', 'g'), '').replace(getRegExp('(<\/div>|<\/p>)','g'), '<br/>');}

wxss代码

.my-class {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}