小程序rich-text文字和图片溢出屏幕问题解决

原因分析：富文本渲染的内容中空格较多，或者图片太大。都会对手机显示造成影响

1.在util.js文件里封装方法，并导出

// 富文本图片格式适配
const formatRichText = html => {
  let newContent= html.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"').replace(/\<div style=\"/gi,'<div style="width:100%;word-break:break-all;word-wrap:normal;').replace(/\s{2,}/g,"")
  return newContent
}

module.exports = {formatRichText}

2.在需要对富文本数据处理的js文件里引入util.js文件

const util=require("../../utils/util.js")
//调用util.js的方法处理富文本
     let content=res.data.result_data.content
         this.setData({
            content: util.formatRichText(content)
          });

3.wxml页面的展示

<view style="padding:12px">
  <rich-text nodes="{{content}}"></rich-text>
</view>