当前位置: 首页 > news >正文

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>"/>
http://www.dtcms.com/a/22667.html

相关文章:

  • 数据库加密全解析:从传输到存储的安全实践
  • 计算机硬件组成+vmware虚拟机使用
  • #第十二题
  • window中git bash使用conda命令
  • 数据分析、商业智能、业务分析三者之间的关系
  • 计算机毕业设计hadoop+spark旅游景点推荐 旅游推荐系统 旅游可视化 旅游爬虫 景区客流量预测 旅游大数据 大数据毕业设计
  • MapReduce的工作原理及其在大数据处理中的应用
  • 多层代理模式解析Invocation
  • 重构测试项目为spring+springMVC+Mybatis框架
  • Debezium同步之如何同步GIS数据
  • 李代数和李群的转化方法
  • 计算机专业知识【软件开发中的常用图表:E - R图、HIPO、DFD、N - S、PAD详解】
  • STM32 HAL库USART串口中断编程:演示数据丢失
  • AI 百炼成神:线性回归,预测房价
  • ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL基本配置和使用
  • PID控制学习
  • [java详细总结] java中的String详解
  • PhotoShop新版脚本编辑工具安装
  • cornerstone3D学习笔记-MPR
  • Web 后端 请求与响应
  • 【Javascript Day17】事件传播、事件对象
  • 基于C++重构muduo网络库搭建HTTP服务器项目设计及反思
  • ffmpeg 多路流处理在iOS的具体使用
  • OpenCV机器学习(6)朴素贝叶斯分类器(Naive Bayes Classifier)cv::ml::NormalBayesClassifier的使用
  • Java内存模型(JMM)深度解析:从并发问题到解决方案
  • Webpack 基础入门
  • 代码随想录第三十五天| 46. 携带研究材料(第六期模拟笔试) 416. 分割等和子集
  • 计算机网络基础知识
  • Nginx 反向代理 MinIO 及 ruoyi-vue-pro 配置 MinIO 详解
  • 跟着AI学习vue3第三章