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包裹住，你可以试试，希望对你有帮助。