问题:因项目需求,需在列表内展示富文本消息,然在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>
*/
以上内容只是第一次做法,基本能实现一些常见异常效果,方法尚有优化空间,期待大佬们指点,万分感谢
最后,码字不易,且看且点赞