效果图

显示三行的效果图

代码

<text class='intro_info'>{{item.introduction}}</text>

/*设置text显示行数，多余的省略*/
.intro_info{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;word-break: break-all;text-overflow: ellipsis;margin-top: 10rpx;line-height: 29rpx;font-size: 26rpx;color: darkgray;
}

微信小程序-控制文本只显示若干行多余隐藏相关推荐

微信小程序-控制文本的显示及隐藏（当文字超出两行时，设置为可点击并进入查看详情页面）
参考文章 1.微信小程序文本展开.收起功能 2.微信小程序文字超过行后隐藏并且显示省略号需求描述显示消息内容,超出两行部分隐藏.当有隐藏内容时,该卡片设为可点击,进入消息详情页面. 代码 1.wx ...
微信小程序解决时间只显示年月日的问题（手机端显示NAN-NAN-NAN）
const iosTime=(date)=>{date = new Date(date.replace(/-/g, "/"));let year = date.getFull ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序 openid及支付的若干问题解决方案
微信小程序 openid及支付的若干问题解决方案参考文章: (1)微信小程序 openid及支付的若干问题解决方案 (2)https://www.cnblogs.com/jhlqab/p/78500 ...
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...

微信小程序-控制文本只显示若干行多余隐藏

效果图

代码

微信小程序-控制文本只显示若干行多余隐藏相关推荐

最新文章

热门文章