小程序
小游戏
企业微信
微信支付
扫描小程序码分享
rich-text里面的标签宽度比较宽，相要在小程序中控制最大宽度为100%也就是屏幕的宽度 ，如何控制？想要把所有的比较大的宽度的标签 如section标签等的width都 给一个max-width：100%
7 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
/** * 处理富文本里的图片宽度自适应 * 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; }
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
我是给p标签追加了一个类，图片的话最大宽度100%
看下你rich-text返回的是什么标签，比如有图片，我给图片加上一个richImg的class类名，然后再css定义richImg
css
max-width: 100%
后端返回的内容中包含有HTML标签还有<style></style>样式表，使用rich-text标签页面无法渲染，该怎么处理呢？？？返回数据格式如下图：
外层的div 是我拼接上去的
遍历返回的数据给指定的标签加上类名？
<rich-text class="content" nodes="{{node}}">rich-text>
.content {
width: 700rpx;
max-width: 100%;
height: auto;
margin: 30rpx auto 80rpx;
font-size: #3A3A3A;
font-size: 28rpx;
line-height: 40rpx;
}
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
/** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style属性：max-width:100%;height:auto * 3.修改所有style里的width属性为max-width:100% * 4.去掉]*>/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;
}
标签 */ function formatRichText(html){ let newContent= html.replace(/
我是给p标签追加了一个类，图片的话最大宽度100%
看下你rich-text返回的是什么标签，比如有图片，我给图片加上一个richImg的class类名，然后再css定义richImg
css
max-width: 100%后端返回的内容中包含有HTML标签还有<style></style>样式表，使用rich-text标签页面无法渲染，该怎么处理呢？？？返回数据格式如下图：
外层的div 是我拼接上去的
遍历返回的数据给指定的标签加上类名？
<rich-text class="content" nodes="{{node}}">rich-text>
.content {
width: 700rpx;
max-width: 100%;
height: auto;
margin: 30rpx auto 80rpx;
font-size: #3A3A3A;
font-size: 28rpx;
line-height: 40rpx;
}