小程序中rich-text的img标签无法通过普通img选择器样式控制，因渲染机制限制仅支持class/style属性；必须用[alt]、img[alt]或img[src]等属性选择器加!important才生效，无属性时需JS正则预处理。
rich-text 组件里图片撑破屏幕，不是数据问题，是样式没生效——直接加 img { max-width: 100%; } 在大多数小程序端根本不起作用。
为什么 img 选择器在小程序里无效
微信小程序的 rich-text 渲染机制不支持普通标签选择器作用于内部节点，哪怕你写了 img { max-width: 100%; }，wxss 也不会匹配到富文本生成的 <img> 标签。官方文档明确写了：只支持 class 和 style 属性，且仅自定义组件内的 wxss 才对 rich-text 中的 class 生效。
- 用浏览器调试能看到
<img src="...">没 class、没 id，只有可能带alt或src - 全局
App.vue或页面 style 中写img选择器，在 H5 有效，但小程序端被忽略 - 某些真机（尤其 iOS）甚至会忽略
[src]这类属性选择器，必须更“具体”
真正生效的 CSS 写法（小程序端实测可用）
必须用带属性的组合选择器，并确保它出现在能影响 rich-text 的作用域内（推荐写在 App.vue 的 <style> 里，不加 scoped）：
-
[alt] { max-width: 100% !important; height: auto !important; }—— 最简方案，前提是后端返回的图片都带alt属性（哪怕为空alt=""） -
img[alt], img[src] { max-width: 100% !important; height: auto !important; }—— 兼容性更强，覆盖无alt但有src的情况 - 如果图片来自 CMS 且完全不可控，可补上
img { max-width: 100% !important; }作为兜底（H5/APP 端生效，小程序端部分机型可能生效）
注意：!important 不是可选，是必须——小程序 wxss 权重机制会让富文本内联样式优先级极高。
如果后端连 alt 都不给，只能走 JS 预处理
当富文本是纯 HTML 字符串（String 类型），且无法保证图片带任何属性时，就得在赋值前用正则清洗并注入样式：
- 移除原
width/height属性：html.replace(/(width|height)=["'][^"']*["']/gi, '') - 移除
style属性中干扰项：.replace(/style=["'][^"']*["']/gi, '') - 给每个
<img开头插入自适应样式：.replace(/<img style="max-width:90%" alt="uni-app如何解决小程序端富文本图片宽度超出屏幕问题" > - 注意：不要用
width: 100%，用max-width: 100%，否则小图会被拉伸变形
示例函数片段：
function fixRichTextImg(html) {
return html
.replace(/(width|height)=["'][^"']*["']/gi, '')
.replace(/style=["'][^"']*["']/gi, '')
.replace(/<img/gi, '<img style="max-width:90%");
}ul/ol 容器宽度溢出导致文字换行异常
除了图片，富文本里的 <ul> 和 <ol> 也常因默认宽度过大导致整段文字横向溢出——这不是内容问题，是容器没约束宽度：
- uni-app 的
rich-text对ul/ol不继承父容器宽度，单位还可能是 px，直接撑满 - H5 端可用
ul, ol { width: 100%; }，但小程序端需加深度穿透：::v-deep ul, ::v-deep ol { width: calc(750rpx - 64rpx) !important; } - 750rpx 是屏幕基准宽度，64rpx 是你外层
<view>的左右 padding 总和（比如padding: 0 32rpx） - 安卓 App 端必须用
::v-deep，iOS 小程序有时可省略，但统一加上更稳妥
真正容易被忽略的是：图片自适应和列表容器宽度是两个独立问题，得同时处理；只修图片，列表里的长文本仍会横向滚动。
