项目用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>
这样之后则可正常显示,单行末尾加省略号。