微信小程序rich-text限制富文本内容格式

最新推荐文章于 2024-02-18 08:55:21 发布

晚生隆海

最新推荐文章于 2024-02-18 08:55:21 发布

阅读量756

点赞数 1

分类专栏： # CSS 微信小程序 web前端文章标签： javascript css3 css

本文链接：https://blog.csdn.net/thlchina/article/details/124009565

版权

web前端同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

微信小程序

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了在小程序中遇到富文本内容显示不正常，图片超出容器的问题。通过在WXML中添加'ql-container'和'ql-editor'类，并在WXSS中设置相应的样式，成功限制了内部内容的样式，确保了图片和文本的正确显示。这种方法提供了一个有效的解决方案来保持富文本内容的布局整洁。

摘要由CSDN通过智能技术生成

后端很多时候直接返回后台上传的富文本内容，内容的图片在小程序会超出，样式乱的
找了很多办法，发现此方法可用，记录下

wxml

添加固定容器类名位：ql-container 和 ql-deitor 即可限制内部内容的样式

    <view class="ql-container">
        <view class="ql-deitor">
            <rich-text class="" nodes="{{nodes}}"></rich-text>
        </view>
    </view>

wxss

.ql-container {
    display: block;
    position: relative;
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
    outline: none;
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-bottom: 30rpx;
    min-height: 50px !important;
  }