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>"/>
相关推荐
GalenZhang88826 分钟前
Java生成微信小程序码及小程序短链接
java·微信小程序·小程序
浮桥1 小时前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频
说私域3 小时前
从大众传媒到数字生态:开源AI智能名片链动2+1模式S2B2C商城小程序驱动的营销革命
人工智能·小程序·开源·零售
换日线°3 小时前
微信小程序连续多个特殊字符自动换行解决方法
微信小程序
海拥4 小时前
《用Cursor和AI绘画24小时开发壁纸小程序》详细开发实录
微信小程序·cursor
10年前端老司机7 小时前
微信小程序behaviors
前端·javascript·微信小程序
山河故人1638 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
10年前端老司机8 小时前
微信小程序自定义组件
前端·javascript·微信小程序
Maitians8 小时前
微信小程序 template 模版详解
微信小程序
不老刘10 小时前
Uni-app网络请求AES加密解密实现
网络·uni-app