uniapp微信小程序使用vue3 的情况下使用rich-text会强制换行

[18678815113]

使用环境

uniapp微信小程序 Vue3

问题描述

uniapp微信小程序使用Vue3的情况下用rich-text解析会强制换行

复现方式

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <view >
                <text>1.(2分)&nbsp;&nbsp;</text>
                <mp-html :tag-style="{p:'display: inline;'}" container-style="display: inline;"
                    :lazy-load="true" :preview-img="false" :content="content1">
                    加载中...
                </mp-html>
            </view>
            <view >
                <text>2.(2分)&nbsp;&nbsp;</text>
                <mp-html :tag-style="{p:'display: inline;'}" container-style="display: inline;"
                    :lazy-load="true" :preview-img="false" :content="content2">
                    加载中...
                </mp-html>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                content1: '<p>—Would yon like to take a messagefor Mike?</p>↵<p>—Yes,_________.</p>',
                content2: '<p>男性<img src="https://shijizhongshi-image.obs.cn-north-4.myhuaweicloud.com/2023/2/9/5086467864503293310/image1.png" alt="image1"><img src="https://shijizhongshi-image.obs.cn-north-4.myhuaweicloud.com/2023/2/9/7027219761926498277/image2.png" alt="image1"><img src="https://shijizhongshi-image.obs.cn-north-4.myhuaweicloud.com/2023/2/9/8354024764925022497/image3.png" alt="image1">。故正确答案），8岁，因一天来发热，半天来神志不清并抽搐一次于7月20日来诊。体检：T40℃，P128次/分，BP70/50mmHg，浅昏迷，颈无抵抗，结膜无充血。血WBC15×10/L，中性0.85。最重要的治疗是<img src="https://shijizhongshi-image.obs.cn-north-4.myhuaweicloud.com/2023/2/9/2599229788045005349/image4.png" alt="image1"></p>'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

/*  .text-area {
        display: flex;
        justify-content: center;
    } */

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

[98Yao]

在我们的项目中也碰到了这个问题，尝试富文本内容用div包裹能把问题解决，比如全局直接 :content="<div>${content}</div>"，或者直接将富文本内容加div包裹住，你可以试试，希望对你有帮助。

[antonbelov]

你解决这个问题了吗？