Small program rich text multi-line text overflow display ellipsis real machine IOS invalid problem

[WeChat Mini Program] Mini Program rich text multi-line text overflow ellipsis ios real machine invalid problem

Before writing a small program, I encountered the problem of rich text, multi-line text overflow, and the ellipsis iso invalid. Because the returned text is rich text, I use v-html to render it on the page. There is no problem at all on the simulator, except for the ios real machine test. It works, android is fine.

page rendering method

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

css style

.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;
}

In this way, there is no problem with writing on the simulator, and the ellipsis can be displayed normally, but the ellipsis is not displayed at all on the real machine.

Solution

The way is to get the rich text returned by the interface, use template strings on the outer layer of the rich text to cover a div box, and write the inline style on the div box,
<div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;">${这里是接口返回的富文本}</div>and then test it with a real machine.