uniapp微信小程序富文本换行符无效

设置两行样式就可以啦

<rich-text class="rich-val" :nodes="detail"></rich-text>

rich-val {

    word-break: break-all;

    white-space: pre-line;

}

let Text =  idetailreplace(/<img [^>]src=['"]([^'"]+)[^>]>/gi,function ( match,capture) {

              return '<img class="proimg" src='+$apibaseURL+capture+ '>'

            });

<p :class="itemisMore == true 'richText' : 'minH'" v-if="isShow"

v-html="contentConv(itemstoryContent)">

</p>

直接在css中加max-width:100%;height:auto; 。没有生效

 方式一：在style中追加 max-width:100%;height:auto; ，此方法优点灵活，对于content中所有都起作用

// 文章html正则追加max-width

contentConv(content) {

return contentreplace(/<(img)(\/>|<\/img>)/g, function(mats) {

if (matsindexOf('style') < 0) {

return matsreplace(/<\simg/, '<img style="max-width:100%;height:auto;"');

} else {

return matsreplace(/style=("|')/, 'style=$1max-width:100%;height:auto;')

}

});

},

方式二：此方法会破坏设置的样式，再设置style="max-width:100%;height:auto;"

contentConv(content) {

    return contentreplace(/<img[^>]>/gi, function (match, capture) {

      return matchreplace(/style\s=\s([‘"])[\s\S]\1/ig, 'style="max-width:100%;height:auto;"') // 替换style

    });

}

后台传来的富文本有些并不能被 rich-text 识别以及良好的展现，比如大小问题，我们后台传来的含有很多<u>标签，尽管官方文档显示小程序支持，但实践中并不可以，只好通过方法将其删除，还有<被转义成&lt这些。我们需要将其换成普通字符供 rich-text 识别：

wxml中：

据了解，小程序看一看是一种特殊的应用程序，它可以在手机上运行，可以为用户提供便捷的服务。

解析小程序的基本步骤是：首先，在小程序开发者工具中打开小程序项目；其次，在小程序开发者工具中查看小程序的代码；最后，在小程序开发者工具中调试小程序，查看小程序的运行效果。

以上就是关于uniapp微信小程序富文本换行符无效全部的内容，包括:uniapp微信小程序富文本换行符无效、微信小程序 批量替换所有富文本img路径以及样式、微信小程序 rich-text 富文本图片自适应等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！