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.rhkb.cn/news/19657.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware 17 安装 VMTools(win 7旗舰 X64)

由于在VM 17中安装的 win 7虚拟机没有安装VM Tools 的原因&#xff0c;界面有大黑边&#xff0c;也无法直接拖拽复制粘贴文件&#xff08;但是如果只是要复制文件&#xff0c;最简单的方法还是使用U盘&#xff09;&#xff0c;所以下面开始安装VM Tools 。 若直接选择VM软件中的…

【MySQL】我在广州学Mysql 系列——Mysql 日志管理详解

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天又是新的一周了&#xff0c;又该摆好心态迎接美好的明天了&#xff01;&#xff01;&#xff01;&#x1f606; 本文主要对Mysql数据库中的日志种类以及基本命令进行讨论&#xff01;&#xff01; 回顾&#xff1a;&#x1f4…

python学opencv|读取图像(六十五)使用cv2.boundingRect()函数实现图像轮廓矩形标注

【1】引言 前序学习进程中&#xff0c;已经使用cv2.findContours()函数cv2.drawContours()函数实现图像轮廓识别和标注&#xff0c;这种标注沿着图像的轮廓进行&#xff0c;比较细致。相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;六十四&#xff09;使用…

DeepSeek-V3 技术报告

DeepSeek-V3 Technical Report https://arxiv.org/abs/2412.19437 1. 核心贡献 DeepSeek-V3 是一个拥有 6710 亿参数的大规模混合专家&#xff08;MoE&#xff09;语言模型&#xff0c;每个 token 激活 370 亿参数。 该模型通过创新的架构设计和训练策略&#xff0c;实现了高效…

PCIe7.0信号完整性优化的一些方向

首先考虑过孔stub的影响&#xff0c;分别仿真10mil stub&#xff0c;6mil stub&#xff0c;3mil stub以及无stub四种情况&#xff0c;观察insertion loss/ return loss/TDR Impedance profile、crosstalk四个参数对比情况。 仿真对比结果如下&#xff1a; 其次&#xff0c;考虑…

学习threejs,使用PointLight点光源

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.PointLight 二、&…

30填学习自制操作系统第二天

今天要干什么&#xff1f; 初步了解汇编语言使用汇编重新写个昨天的镜像文件继续开发 一: 什么是电信号&#xff1f; 电脑的处理中心是CPU&#xff0c;即“central process unit”的缩写&#xff0c;翻译成中文就是“中央处理单元”&#xff0c;顾名思义&#xff0c;他就是…

Python的顺序结构和循环结构

文章目录 一、条件语句&#xff08;1&#xff09;条件语句的定义&#xff08;2&#xff09;条件语句的语法&#xff08;a&#xff09;单分支 if&#xff08;b&#xff09;双分支 if-else&#xff08;c&#xff09;多分支 if-elif-elif-...-else &#xff08;3&#xff09;注意事…

金蝶云星空点击按钮实现指定文件下载

文章目录 金蝶云星空点击按钮实现指定文件下载业务需求开发实现 金蝶云星空点击按钮实现指定文件下载 业务需求 点击按钮&#xff0c;下载excel 开发实现 创建表单插件&#xff0c;在按钮点击事件&#xff0c;调用附件下载窗口进行指定路径的指定文件下载 模板存放路径 …

EasyExcel的简单使用

EasyExcel使用 官方文档&#xff1a;关于EasyExcel 1.1EasyExcel相关依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.11</version></dependency> 1.2 写Excel 1.2.1 最…

游戏引擎学习第107天

仓库:https://gitee.com/mrxiao_com/2d_game_2 回顾我们之前停留的位置 在这段内容中&#xff0c;讨论了如何处理游戏中的三维效果&#xff0c;特别是如何处理额外的“Z层”。由于游戏中的艺术资源是位图而不是3D模型&#xff0c;因此实现三维效果变得非常具有挑战性。虽然可…

「vue3-element-admin」基于 TypeScript 的 ECharts 按需引入方案实战 - Vue3 项目打包体积优化 57%

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …

用Python实现图像风格迁移的技术分析

文章目录 一、概要 二、效果预览 三、整体架构流程 1. 用户界面(GUI): 2. 图像加载与显示: 3. 风格迁移核心算法: 4. 结果显示与保存: 5. 多线程处理: 四、技术名词解释 1. OpenCV: 2. TensorFlow: 3. VGG19: 4. GUI(图形用户界面): 5. 多线程: 五…

gsoap实现webservice服务

gsoap实现webservice服务 在实现Web服务时&#xff0c;使用gSOAP是一个很好的选择&#xff0c;因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库&#xff0c;它支持SOAP协议的各种版本&#xff0c;包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝 1. 全排列2. 子集 1. 全排列 题目链接&#xff1a;46. 全排列 算法原理&#xff1a; 画出决策树 设计函数 全局变量&#xff1a;二维数组ret存储结果&#xff1b;一维数组path存储路径&#xff1b;boolean类型一维数组visited表示当…

NAT(网络地址转换)技术详解:网络安全渗透测试中的关键应用与防御策略

目录 NAT的作用 NAT类型 NAT工作流程示例 NAT 转换技术的原理 源地址转换&#xff08;SNAT&#xff0c;Source NAT&#xff09;&#xff1a; 目标地址转换&#xff08;DNAT&#xff0c;Destination NAT&#xff09;&#xff1a; 端口地址转换&#xff08;PAT&#xff0c…

OpenCV图像基本操作

学习目标&#xff1a; 学习一些OpenCV中对于图像的基本操作 学习内容&#xff1a; 第一步导入库和所需的图像。 import cv2 import numpy as np imgcv2.imread("lena.png") # cv2.imshow("img",img) # cv2.waitKey(0) 访问和修改图片像素 访问图片像素…

具身智能在智能巡检机器人中的应用——以开关柜带电操作机器人为例

随着机器人技术和人工智能的迅速发展&#xff0c;具身智能在各行业的应用日益广泛&#xff0c;尤其是在电力行业中的智能巡检领域。传统的电力巡检和维护工作通常需要人工操作&#xff0c;存在着高温、高压、强电磁场等危险环境&#xff0c;且效率较低。开关柜带电操作机器人作…

巨控GRM530系列的远程模块用于PLC远程上下载方案

巨控GRM530系列的远程模块用于PLC远程上下载方案 一、方案概述 巨控科技基于全球加速服务器与智能通讯模块&#xff0c;提供高效、安全的工业设备远程上下载及维护服务。支持多协议PLC、触摸屏、运动控制器等设备&#xff0c;突破地域限制&#xff0c;实现跨国、跨网络的无缝调…

fastadmin快速搭建导航站和API接口站点系统

这份源码是基于fastadmin框架制作的&#xff0c;不仅可以快速搭建漂亮的导航站和API接口站点&#xff0c;而且还具有可扩展性和定制性。源码开放&#xff0c;方便二次开发和定制&#xff0c;适合各种需求。快来体验这个功能强大的站点源码&#xff0c;为您的项目提供便捷解决方…