小規模プログラムリッチテキスト複数行テキストオーバーフロー表示省略記号実機IOS無効問題

[WeChat ミニ プログラム] iOS 実機でのミニ プログラム リッチ テキストの複数行テキスト オーバーフロー省略記号が無効な問題

小さなプログラムを作成する前に、リッチ テキスト、複数行のテキスト オーバーフロー、および省略記号 ISO が無効であるという問題に遭遇しました。返されたテキストはリッチ テキストなので、v-html を使用してページ上に表示します。問題はありません。 iOS 実機テストを除いて、シミュレータではまったく動作しません。Android は問題ありません。

ページのレンダリング方法

<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>。