// 使用 rich-text 加载富文本数据
<rich-text class="richText" :nodes="nodes"></rich-text>
一 .对 H5 中的详情
- 自适应HTML内容 中的图片大小.
// 全局搜索并替换图片样式
this.nodes = this.item.content.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
- 使用增加权重的方式, 修改 HTML 内容中的字体样式.
.richText {
padding: 0rpx 30rpx 0rpx 30rpx;
// line-height:1.667em;
// letter-spacing:0.5px;
text-align:justify;
word-break: break-all;
p{
font-size: 32rpx !important;
// text-indent: 2em !important;
text-align: justify !important;
color: #333333 !important;
line-height:1.667em !important;
letter-spacing:0.5px !important;
word-break: break-all !important;
// margin-bottom: 28rpx !important;
}
span{
font-size: 32rpx !important;
text-indent: 2em !important;
text-align: justify !important;
color: #333333 !important;
line-height:1.667em !important;
letter-spacing:0.5px !important;
word-break: break-all !important;
}
}
二. 对于微信小程序
.1. 自适应HTML内容 中的图片大小.
// content 为后端返回的富文本内容
formatImg(content) {
if (!content) return '';
const regex = /<img[^>]*>/g;
content = content.replace(regex, function(match) {
return match.replace('>', 'style="max-width:100%;height:auto;">');
});
return content;
},
- 直接使用class增加权重的方式, 修改 HTML 内容中的字体样式
.richText {
padding: 0rpx 30rpx 0rpx 30rpx;
// line-height:1.667em;
// letter-spacing:0.5px;
text-align: justify;
word-break: break-all;
font-size: 32rpx !important;
// text-indent: 2em !important;
text-align: justify !important;
color: #333333 !important;
line-height: 1.667em !important;
letter-spacing: 0.5px !important;
word-break: break-all !important;
// color: red !important;
// margin-bottom: 28rpx !important;
}
