小程序富文本多行文本溢出显示省略号真机IOS无效问题

【微信小程序】小程序富文本多行文本溢出省略号ios真机无效问题

之前写小程序遇到富文本多行文本溢出省略号iso无效问题,因为返回的是富文本所以用v-html渲染在页面上，在模拟器上一点问题没有，唯独到了ios真机测试是没效果的，安卓倒是没问题

页面渲染方式

<div class="rice-text">
	<div  v-html="coupon.USE_DESC" > </div>
</div>

css样式

.rice-text{
	width: 100%;
	height: 90rpx;
	line-height: 30rpx;
	font-size: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

这样写模拟器上一点问题没有，省略号也能正常显示，但是到了真机上根本不显示省略号

解决办法

办法就是在拿到接口返回的富文本以后，在富文本外层使用模板字符串再套一层div盒子，并且在div盒子上写上行内样式
<div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;">${这里是接口返回的富文本}</div> 然后再用真机测试看看吧