rich-text如何实现限制富文本的显示行数？

分类：uni-app

css

uni-app 微信小程序中rich-text如何实现限制富文本的显示行数？内容超过2行的时候末尾使用...代替
如附件效果图

自己使用如下css样式控制，在模拟器和安卓上控制可以实现，但在iOS真机上并未能实现效果：

/// 限制高度 超出部分...显示  
overflow: hidden !important;  
word-break: break-all !important;  
/* break-all(允许在单词内换行。) */  
text-overflow: ellipsis !important;  
/* 超出部分省略号 */  
display: -webkit-box !important;  
/** 对象作为伸缩盒子模型显示 **/  
-webkit-box-orient: vertical !important;  
/** 设置或检索伸缩盒对象的子元素的排列方式 **/  
-webkit-line-clamp: 2 !important;  
/** 显示的行数 **/

2022-01-10 21:35 负责人:无分享

6 个回复

远子

您好，这个问题最后有实现吗

l***@163.com (作者)

没有

2022-06-13 21:26

风残落叶

有能解决的吗

风残落叶

现在IOS只能限制高度

2022-05-20 11:19
l***@163.com (作者)

回复风残落叶: 没什么用限制高度有时候会显示空白

2022-06-13 21:25

2***@qq.com

您好，这个问题最后有实现吗

l***@163.com (作者)

无解

2022-06-13 21:25

昱凯

script

newsList.forEach((item)=>{  
    item.text =  `<div class="line1">${item.text}</div>`  
})

css

.line1 {  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
    width:500rpx;  
}

template

<rich-text :nodes="item.text"></rich-text>

1***@qq.com - 开发者

各个方法都用了还是不行，太坑了

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序

js手动截取吧

要回复问题请先登录或注册

rich-text如何实现限制富文本的显示行数？

6 个回复

公告

相关问题

rich-text如何实现 限制富文本的显示行数？

与内容相关的链接

6 个回复

公告

相关问题

rich-text如何实现限制富文本的显示行数？