问题：因项目需求，需在列表内展示富文本消息，然在pc及安卓端微信浏览器均无问题，但ios端微信浏览器内容显示排版失效，导致页面内容排版异常

css代码

className{
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

css样式正常，ios端处理结果基本正常，但超出部分未隐藏

ios端问题推测：

① 使用多标签包裹

② 使用h1等标题标签重叠 

例：

`
<h1>文本</h1>
<p>内容文本</p>
<h2>后缀文字</h2>
`

ios端解决方法：

① 使用js进行截取替换标签成自定义样式

② 去除标签自带class、style、href属性以及替换p、h1-h6等标签

let str = `
<h1>测试文字</h1>
<h2>测试h2替换</h2>
<p class="aaa" style="font-size: 10px;">截取class和style属性</p>
<p>
    <a href="www.baidu.com" />
    <img src=\"https://iknowpc.bdimg.com/static/common/widget/search-box-new/img/logo-zhidao-update-new.59aff7f.png \">
    </p>
`
function test() {
    /* 
     * 1 循环所需替换字符集
     * 2 循环替换字符集
     * 3 判断下标对应
     * 4 使用字符串replace进行替换（replace第一个参数支持正则表达式）
     * 5 如有需要截取style等属性去掉文本行内样式
     * 
     */ 
    // 包含字符集
    let arr = ['<p>', '</p>', '<h1>', '</h1>', '<h2>', '</h2>', '<h3>', '</h3>', '<h4>', '</h4>', '<h5>', '</h5>', '<h6>', '</h6>'];
    // 替换字符集
    let resArr = ['<span>', '</span>', '<p class="a">', '</p>', '<p class="b">', '</p>', '<p class="c">', '</p>', '<p class="d">', '</p>', '<p class="e">', '</p>', '<p class="f">', '</p>'];
    for (let x in arr) {
        for (let y in resArr) {
            if (x == y) {
                // 截取替换全局匹配项
                str = str.replace(new RegExp(arr[x], "g"), resArr[y]);
                // 全局截取以style="、class="、href="开头，"结尾，替换为空
                str = str.replace(new RegExp('(style="|class="|href=").*?(")', "g"), '');
            }
        }
    }
    return str

}
console.log(test()); 
/* 
输出结果：
    <p >测试文字</p>
    <p >测试h2替换</p>
    <p  >截取class和style属性</span>
    <span>
        <a  />
        <img src="https://res-101.oss-cn-beijing.aliyuncs.com/NewStep/image/20220110/7fa868cd2ac0c285eee3860c6ba1b8aa.png">
    </span>
 */  

以上内容只是第一次做法，基本能实现一些常见异常效果，方法尚有优化空间，期待大佬们指点，万分感谢

最后，码字不易，且看且点赞