欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 名人名企 > uniapp 使用v-html在微信小程序中渲染成rich-text如何显示文本溢出省略

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

2025/2/23 15:14:02 来源:https://blog.csdn.net/q1003675852/article/details/145688312  浏览:    关键词: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>"/>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词