php text 溢出,uni-app利用rich-text展示富文本内容，图片的宽度溢出屏幕

在使用Uni-app开发商城的时候，因为商品的详情是图文的，必然用到了富文本编辑器吗，富文本编辑器里面保存下来的html几乎类似这样。

在做H5页面的时候会存在图片宽度溢出屏幕的情况。

处理办法如下。

1.在App.vue组件中(h5)，直接在App.vue修改即可：

.........

/*每个页面公共css */

@import "./common/app.css";

.......

/*覆盖文本编辑器里面的图片的大小*/

uni-rich-text img{ max-width: 100% !important;}

2、关于小程序里面图片溢出问题，这里借鉴一个大神的文章

思路:

把图片的宽度改为手机屏幕对应的宽度

微信小程序需要知道的知识

需要知道微信小程序里有自己的宽度标准，单位为rpx；

针对所有不同尺寸的浏览器，微信小程序里规定屏幕宽为750rpx；

解决办法如下

WXML

WXS

data={artical:''}

async onLoad(){

const json = await api.getDetail();

if(json !== null){

this.artical = util.formatRichText(json.detail.description);

}

}

若artical里只有图片，并且图片没有设置style和宽度/高度

util.js

function formatRichText(html){

let newContent= html.replace(/\

标签

* @param html

* @returns {void|string|*}

*/

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(/\

脑筋若无正确的思想的培养，任它怎样发达，这发达总是畸形的发达，那么一切的行为都没有稳定的正确的立足点。 —— 聂耳