uniapp 使用v-html在微信小程序中渲染成rich-text如何显示文本溢出省略

晓风伴月2025-02-18 9:20

一、问题描述

小伙伴有个需求，想在uniapp开发的微信小程序的一个列表中对内容进行显示溢出显示省略号的控制：当文本超出一行之后，显示...。

经过尝试，无法在v-html所在的节点进行ellipise的控制。

二、解决方案

1.增加函数：

复制代码

const getDesc = (desc) => {
	return `<div style='overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all; '>${desc}</div>`
}

2.在v-html中调用getDesc：

复制代码

<div class="item-content-box" v-html="getSessionDesc(item.sessionDesc)" />

3.最终效果：

可以看到，如果是原生的微信小程序，那么应该对rich-text组件的nodes做个包裹：

复制代码

<rich-text nodes="<div style='overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all; '>肺部结节的良恶性鉴别是临床诊断中的一个重要环节。以下是一些可能提示肺部结节为恶性的特征</div>"/>