小程序
小游戏
企业微信
微信支付
扫描小程序码分享
展示的text如果文本过长,如果超出了设置的高度(或者超过3行),则仅显示3行。通过展开的方式显示全部内容。
我现在想知道,
我拿到文本之后,怎么计算所需的高度或者行数
效果类似于微信朋友圈文本那样,展开与收起
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
用view可以啊,或者你加个display:block。然后用max-height属性和line-height控制一下;或者可以
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
超过3行的我要显示 “展开” 的按钮,没有超过的,就不显示“展开”按钮,我要的是如何判断是否有3行呢
这样子,你弄两层,父标签设上max-height ,预计成3行的高度,并且overflow:hidden;然后用query去查子标签的高度,如果子标签的高度高一些,就放个展开按钮
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
这个方法确实可行,但是针对于一个图文本列表来说,例如像微信朋友圈那样该如何确定对应的每条,因为我是用wx:for 渲染的一个图文列表。
wx.createSelectorQuery().selectAll('.class).boundingClientRect().exec(),
这个方法获取的是全部的文本高度,如何确定每条数据当前的高度呢。
wx:for的标签上,加个class,selectAll这个class,出来的结果里没有每一项吗?
可以了,非常感谢
可以参考我的解决方案:https://mp.weixin.qq.com/s/ZxqiAqjES-OLeKiOLwbDkg
顶一下有用吗
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
用view可以啊,或者你加个display:block。然后用max-height属性和line-height控制一下;或者可以
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
超过3行的我要显示 “展开” 的按钮,没有超过的,就不显示“展开”按钮,我要的是如何判断是否有3行呢
这样子,你弄两层,父标签设上max-height ,预计成3行的高度,并且overflow:hidden;然后用query去查子标签的高度,如果子标签的高度高一些,就放个展开按钮
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
这个方法确实可行,但是针对于一个图文本列表来说,例如像微信朋友圈那样该如何确定对应的每条,因为我是用wx:for 渲染的一个图文列表。
wx.createSelectorQuery().selectAll('.class).boundingClientRect().exec(),
这个方法获取的是全部的文本高度,如何确定每条数据当前的高度呢。
wx:for的标签上,加个class,selectAll这个class,出来的结果里没有每一项吗?
可以了,非常感谢
可以参考我的解决方案:https://mp.weixin.qq.com/s/ZxqiAqjES-OLeKiOLwbDkg
顶一下有用吗