css 效果-uni-app实现文字环绕图片之后最多显示两行

最近用uni-app开发小程序过程中，遇到问题：没有设置文本显示行数，文字多的时候溢出挡住下面的问题，后面改成如下效果。

效果图

代码

.info {
	width: 296rpx;
	height: 56rpx;
	padding: 16upx;
	font-size: 20upx;
	font-weight: 500;
	color: #333333;
	line-height: 28upx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	overflow: hidden; //超出的文本隐藏
	text-overflow: ellipsis; //溢出用省略号显示
	white-space: normal;//处理元素中的 空白
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 2;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	image {
		width: 53upx;
		height: 30upx;
	}
	text {
		margin-left: 4upx;
	}
}	

<div class="info">
<image src="https://smilefacej.oss-cn-chengdu.aliyuncs.com/chujian-ai/hot_marker.png">
</image>
<text>{{text}}</text>
</div>