关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

7月前作者：敲敲打打分类：Toy博客阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序和字节小程序中的rich-text可以将后台富文本显示在前端，但是当图片过宽时微信小程序中就会超出显示范围，而字节小程序中却不会。（微信开发者是不是该优化下这个控件了）

微信小程序中

关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

字节小程序中

关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

那就解决微信小程序中的显示问题就可以了，可以看到微信小程序中富文本内容是在rich-text的nodes属性中的

关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

常规的思路是给上层样式中的img标签宽度设为100%，即

.laingxuan_bot img{width: 100%;}

但是木有用。

这里可以利用属性选择器，给img的alt宽度100%，即

.laingxuan_bot [alt]{width: 100%;}

关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

完美解决，如果大家有别的解决办法欢迎讨论，学习下。文章来源地址https://www.toymoban.com/news/detail-505445.html

到了这里，关于关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序中rich-text富文本的用法

首先：用普通的方法直接传递是会出错的。item是从接口中拿过来的富文本控制台会提示渲染错误解决办法：用encodeURIComponent转码当然，在接收的地方还要处理一下现在用rich-text标签直接渲染goodDetails 就显示正常了因为一般接口给出来的图片都是像这样的，需要我们去添加

2024年02月14日
浏览(29)
微信小程序 rich-text 超过 2 行显示省略号

rich-text（富文本），如果想实现文本超过两行变成省略号，常规的 div 可以实现，但因为是在微信小程序中，同时使用的是 rich-text 返回的是富文本，所以不能简单的使用以下代码实现：因为富文本使用的 rich-text 回显的，想着直接对这个标签写上这个 CSS，发现也无法达到想

2024年02月03日
浏览(29)
微信小程序 rich-text富文本框怎么设置里面节点的样式

1、在JS中我们获取数据，在没有类名的情况下使用正则匹配你想要添加演示的节点 res[1].data[0].f_content为rich-text里面的节点如图代码：让获取的节点中的图片的最大宽度为100%,高度为auto 初始状态：图片超过div 效果：

2024年02月16日
浏览(28)
【微信小程序入门到精通】— 这篇看完直接拿下 text 和 rich-text 组件！

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！ 1. text 是一种文本组件 2. text类似于HTML中span标签，

2024年02月10日
浏览(40)
微信小程序富文本解析 rich-text 、wxParse、mp-html

rich-text 微信自带标签很多局限性还有后台的富文本 font 标签 size 不生效。字体大小无法设置 wxParse 微信很早的那期副本插件封装。拥有7.7k stars已停止维护了的库缺点 1、在解析富文本过程中，多次调用小程序的setData()方法，对性能有一定影响 2、可以解析audio，但是不能保

2024年02月15日
浏览(35)
uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式

rich-text 富文本组件在微信小程序中，无法直接通过外部css样式控制文章内容样式。解决方案：将传入的富文本内容截取并添加自定义样式类名（1）全局配置filter方法，实现富文本内容截取转换，附上‘rich-txt-p’样式类（2）在app.vue中编辑‘rich-txt-p’内容，即富文本需要

2024年02月19日
浏览(38)
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image

view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-vi

2024年02月15日
浏览(31)
uniapp开发小程序使用rich-text富文本解析对图片大小处理

1、问题：在小程序中使用rich-text富文本解析时图片大小不能自适应而超出屏幕问题。 2、解决方式：如下这是我绑定的值，在绑定值前，需要先进行对图片数据的处理后再使用即可。 3、接口数据处理方法！！！！！（重点） .replace(/img/gi, \\\'img style=\\\"width:100%;height:auto\\\"

2024年02月11日
浏览(29)
小程序rich-text单行省略

小程序rich-text单行省略返回数据为HTML字符串,需要在rich-text渲染, 需要在一行显示，超出部分进行隐藏 template片段 script方法通过以上方法即可解决参考文档：https://blog.csdn.net/u013611033/article/details/121535633

2024年02月16日
浏览(25)
【uni-app】rich-text的使用

rict-text可以支持部分HTML节点及属性 rict-text的属性如下： nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，推荐直接使用 Array 类型避免内部转换导致的性能下降。App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，如要使用 HTML

2024年02月13日
浏览(34)