收藏
回答

如何在小程序中控制rich-text里面内容的样式?

rich-text里面的标签宽度比较宽,相要在小程序中控制最大宽度为100%也就是屏幕的宽度 ,如何控制?想要把所有的比较大的宽度的标签 如section标签等的width都 给一个max-width:100%

最后一次编辑于  2020-08-07
回答关注问题邀请回答
收藏

7 个回答

  • 兵
    2020-08-18
    /**
     * 处理富文本里的图片宽度自适应
     * 1.去掉img标签里的style、width、height属性
     * 2.img标签添加style属性:max-width:100%;height:auto
     * 3.修改所有style里的width属性为max-width:100%
     * 4.去掉
    标签  */
    function formatRichText(html){     let newContent= html.replace(/]*>/gi,function(match,capture){       match = match.replace(/style="[^"]+"/gi'').replace(/style='[^']+'/gi'');       match = match.replace(/width="[^"]+"/gi'').replace(/width='[^']+'/gi'');       match = match.replace(/height="[^"]+"/gi'').replace(/height='[^']+'/gi'');       return match;     });     newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){       match = match.replace(/width:[^;]+;/gi'max-width:100%;').replace(/width:[^;]+;/gi'max-width:100%;');       return match;     });     newContent = newContent.replace(/]*\/>/gi'');     newContent = newContent.replace(/\'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');     return newContent;   }


    2020-08-18
    有用 1
    回复
  • 起风了
    起风了
    2020-08-07

    我是给p标签追加了一个类,图片的话最大宽度100%

    2020-08-07
    有用 4
    回复
  • 八九
    八九
    2020-08-07

    看下你rich-text返回的是什么标签,比如有图片,我给图片加上一个richImg的class类名,然后再css定义richImg

    2020-08-07
    有用 1
    回复 4
    • 兵
      2020-08-07
      返回的是section标签
      2020-08-07
      回复
    • 兵
      2020-08-07
      内容是用秀米添加的 有的section里面还有嵌套的section标签
      2020-08-07
      回复
    • 八九
      八九
      2020-08-07回复
      小程序是不是不支持section标签 你用正则把section替换成view  然后加一个类名 设置最大长度100就ok
      2020-08-07
      回复
    • 八九
      八九
      2020-08-07回复
      好像支持的嘛 你给section加class试试
      2020-08-07
      回复
  • 微喵网络
    微喵网络
    2020-08-07

    css

    max-width: 100%
    
    2020-08-07
    有用 1
    回复
  • 张瘦瘦
    张瘦瘦
    2020-11-05

    后端返回的内容中包含有HTML标签还有<style></style>样式表,使用rich-text标签页面无法渲染,该怎么处理呢???返回数据格式如下图:

    外层的div 是我拼接上去的

    2020-11-05
    有用
    回复 3
    • 雨田氵刅木
      雨田氵刅木
      2020-12-30
      请问你解决了吗?我遇到的情况和你一模一样
      2020-12-30
      回复
    • run forrest run
      run forrest run
      2021-01-17回复雨田氵刅木
      同样遇到这个问题。。。请问您解决了吗?
      2021-01-17
      回复
    • 程以叁
      程以叁
      2021-03-25
      添加完class名 在当前组建的wxss里面给class赋值就可以了
      2021-03-25
      回复
  • 幻生
    幻生
    2020-09-10

    遍历返回的数据给指定的标签加上类名?

    2020-09-10
    有用
    回复
  • hf
    hf
    2020-08-07

      <rich-text class="contentnodes="{{node}}">rich-text>

    .content {

      width: 700rpx;

      max-width: 100%;

      height: auto;

      margin: 30rpx auto 80rpx;

      font-size: #3A3A3A;

      font-size: 28rpx;

      line-height: 40rpx;

    }


    2020-08-07
    有用
    回复
登录 后发表内容
问题标签