l***@163.com
l***@163.com
  • 发布:2022-01-10 21:35
  • 更新:2023-10-21 16:39
  • 阅读:1572

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 负责人:无 分享
已邀请:
远子

远子

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

风残落叶

风残落叶

有能解决的吗

2***@qq.com

2***@qq.com

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

昱凯

昱凯

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

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

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

piaoyi_UI

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

js手动截取吧

要回复问题请先登录注册