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

一、问题描述

小伙伴有个需求,想在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>"/>
相关推荐
橘猫云计算机设计几秒前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
认真敲代码的小火龙4 小时前
微信小程序(下)
微信小程序·小程序
Mr.Liu64 小时前
小程序29-事件穿参-mark 自定义数据
前端·微信小程序·小程序
web_Hsir5 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
PBitW6 小时前
微信小程序 -- 原生封装table
前端·微信小程序
低代码布道师6 小时前
加油站实战小程序04今日油价
低代码·小程序
ml130185288747 小时前
DeepSeek 助力心理医生小程序赋能!心理咨询小程序 线上咨询平台搭建
java·开发语言·小程序
平凡的阿泽8 小时前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程9 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计