微信小程序rich-text里面写单行溢出显示省略号在ios中不显示的问题

news2024/10/5 23:27:37

项目用uniapp开发。然后赋值用v-html来写。(v-html可以转换html格式并且展示。运行到小程序里面是用rich-text标签展示) 原来返回的item.titleName如下:<font style="color: #ff4343;">测试</font>课程名称长度加加加爱家加啊加加加加

	<view class="nameClass"	v-html="item.titleName"></view>

nameClass设置单行溢出末尾加省略号。

.nameClass {
				width: 430rpx;
				font-size: 30rpx;
				font-weight: bold;
				text-align: left;
				color: #333333;
				white-space: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

但是现在 遇到的问题是,ios手机系统15以上 ,标题内容不展示, 通过问题查找发现是高度的问题,但是设置了高度虽然单行了但是末尾不加省略号

解决方案:需要给一个默认的div标签,在div写行内样式。所以接口返回的 属性要拼上div,div里面设置上单行省略号的属性。

如下返回的item.titleName:"<div style='overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all; '><font style='color: #ff4343;'>测试</font>测试课程名称长度加加加爱家加啊加加加加</div>"

 

<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; '>
测试</font>测试课程名称长度加加加爱家加啊加加加加</div>">
</rich-text> 

这样之后则可正常显示,单行末尾加省略号。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1183658.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【微信小程序】新版获取手机号码实现一键登录(uniapp语法)(完整版附源码)

需求 如图&#xff0c;点击按钮&#xff0c;获取用户手机号实现一键登录&#xff0c;当然&#xff0c;用户也可以自行输入其他手机号进行登录 问题 要想获取用户手机号并不复杂&#xff0c;但由于近几年微信小程序获取手机号的api进行了更新&#xff0c;当前很多帖子使用的…

【delphi】中 TNetHTTPClient 注意事项

一、TNetHTTPClient 是什么&#xff1f; 用于管理 HTTP 客户端的组件。相当于indy中的TidHTTP控件&#xff0c;是实现HTTP请求的客户端控件。 二、TNetHTTPClient 需要注意什么&#xff1f; 需要注意的是几个Timeout&#xff0c;因为我们使用TNetHTTPClient控件的时候&#x…

1 快速了解Paimon数据湖核心原理及架构

1.1 什么是Apache Paimon Apache Paimon的前身属于Flink的子项目&#xff1a;Flink Table Store。 目前业内主流的数据湖存储项目都是面向批处理场景设计的&#xff0c;在数据更新处理时效上无法满足流式数据湖的需求&#xff0c;因此Flink社区在2022年的时候内部孵化了 …

Golang Windows系统使用make build

gcc -v 找到上面mingw64/bin目录&#xff0c;复制mingw32-make.exe一份&#xff0c;改成make.exe ,即可。

9.spark自适应查询-AQE之动态调整Join策略

目录 概述动态调整Join策略原理实战 动态优化倾斜的 Join原理实战 概述 broadcast hash join 类似于 Spark 共享变量中的广播变量&#xff0c;Spark join 如果能采取这种策略&#xff0c;那join 的性能是最好的 自适应查询AQE(Adaptive Query Execution) 动态调整Join策略 原…

金蝶云星空单据转换下推时上游单据的主键和明细主键获取和保存

文章目录 金蝶云星空单据转换下推时上游单据的主键和明细主键获取和保存产品序列号对照表增加字段创建单据转换插件在单据转换规则注册插件测试 金蝶云星空单据转换下推时上游单据的主键和明细主键获取和保存 比如&#xff1a;售后单下推对照表&#xff0c;是一对一&#xff0…

(深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会

hi&#xff0c;同学们&#xff0c;我是赤辰 7月份的时候&#xff0c;Open AI就找来了一位全球顶级的华人产品经理Peter Deng&#xff0c;要给这个技术很强但交互很差ChatGPT动一番大手术。 在11月7日凌晨2点&#xff0c;终于等到了Open AI发布的首届开发者大会&#xff0c;也被…

Vb6 TCP Server服务端监听多个RFID读卡器客户端上传的刷卡数据

本示例使用设备介绍&#xff1a;WIFI无线4G网络RFID云读卡器远程网络开关物流网阅读器TTS语音-淘宝网 (taobao.com) Option ExplicitConst BUSY As Boolean False 定义常量 Const FREE As Boolean TrueDim ConnectState() As Boolean 定义连接状态 Dim ServerSendbuf(…

超级好用的几个工具

JamTools JamTools是一个全平台支持的小工具集软件&#xff0c;可用于Windows 7/8/10/11、MacOS、Ubuntu等系统&#xff08;其他系统可自行编译源码进行打包&#xff09;。该工具集包含了多项实用功能&#xff0c;如滚动/区域截屏、录屏、文字识别、多语言互译、多媒体格式转换…

计算机网络——物理层-物理层的基本概念、物理层下面的传输媒体

目录 物理层的基本概念 传输媒体 物理层的基本概念 在计算机网络中&#xff0c;用来连接各种网络设备的传输媒体种类众多。大致可以分为两类。一类是导引型传输媒体&#xff0c;另一类是非导引型传输媒体。 在导引型传输媒体中&#xff0c;常见的有双绞线、同轴电缆、光纤。…

Qt开发流程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…

是时候和 Confluence 说再见了

作为最早为 Confluence 中文化提供服务的社区&#xff0c;我们也面临着最后的时间了。 Confluence 已经不再为用户签发开源许可证了&#xff0c;这意味着在今年许可证到期后&#xff0c;我们要不就需要把所有数据迁移到 Confluence 云平台上。 要不就自己部署完整的云平台服务…

Apache Airflow (一) : Airflow架构及

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

three.js点滴yan(整理后)

场景、相机和渲染器 Three.js整个系统主要包含场景Scene、相机Camera和WebGL渲染器WebGLRenderer三大块&#xff0c;其中场景又包含模型和光源。WebGL渲染器的主要作用就是把相机对应场景渲染出来&#xff0c;显示在网页Cnavas画布上。 Three.js源码 Three.js各个构造函数对应…

YOLO目标检测——交通标志检测数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;交通标志识别数据集在自动驾驶、交通安全监控、智能交通系统、驾驶员辅助系统和城市规划等领域都有广泛应用的潜力数据集说明&#xff1a;交通标志识别数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;含有交通标识3类…

使用Streamlit创建AutoGen用户界面

AutoGen作为一个最大化LLM(如GPT-4)能力的框架而脱颖而出。由微软研究院开发的AutoGen通过提供一种自动化、优化和编排工作流的方法&#xff0c;简化了复杂的、基于多代理llm的应用程序的创建。我们在以前的文章中也有过介绍&#xff0c;你可以与许多GPT交谈&#xff0c;并且GP…

GPU推理提速4倍!FlashDecoding++技术加速大模型推理

推理大模型&#xff08;LLM&#xff09;是AI服务提供商面临的巨大经济挑战之一&#xff0c;因为运营这些模型的成本非常高。FlashDecoding 是一种新的技术&#xff0c;旨在解决这一问题&#xff0c;它通过提高LLM推理速度和降低成本&#xff0c;为使用大模型赚钱提供了新的可能…

从F5 BIG-IP RCE漏洞(CVE-2023-46747)来看请求走私的利用价值

0x01 前言 F5 BIG-IP广域流量管理器是一种网络流量管理设备&#xff0c;用于提升链路性能与可用性。F5在金融行业具有特别广泛的使用量&#xff0c;做过各大银行攻防演练的小伙伴对这个系统应该不会陌生。 最近爆出的CVE-2023-46747漏洞能达到远程RCE的效果&#xff0c;属于严重…

浅谈消防设备电源监控系统在大型建筑内的应用

【摘要】&#xff1a;当建筑内火灾发生时&#xff0c;各类消防设备能否正常运行、能否发挥作用是初期火灾扑救是否成功的重要条件之一&#xff0c;而稳定可靠的消防设备电源则是消防设备正常工作的保障。因此针对消防设备电源的监测系统至关重要。 【关键词】&#xff1a;消防…

Python 既是解释型语言,也是编译型语言

哈喽大家好&#xff0c;我是咸鱼 不知道有没有小伙伴跟我一样&#xff0c;刚开始学习 Python 的时候都听说过 Python 是一种解释型语言&#xff0c;因为它在运行的时候会逐行解释并执行&#xff0c;而 C 这种是编译型语言 不过我今天看到了一篇文章&#xff0c;作者提出 Pytho…