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

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

XML 复制代码
	<view class="nameClass"	v-html="item.titleName"></view>

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

css 复制代码
.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>"

html 复制代码
<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> 

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

相关推荐
老李不敲代码21 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
米奇妙妙wuu2 天前
uniapp中使用<cover-view>标签
前端·uniapp·html5
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序