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

本文主要是介绍微信小程序rich-text里面写单行溢出显示省略号在ios中不显示的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目用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> 

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

这篇关于微信小程序rich-text里面写单行溢出显示省略号在ios中不显示的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---