2019-09-30 小程序怎么让文本只显示两行!超出后以...省略号显示!

2019-09-30 小程序怎么让文本只显示两行!超出后以...省略号显示!,第1张

<view class="box">我的字数很多阿萨德撒萨达萨达萨达就安静的加多少家看得开卡打卡拉到了啦啦队啦啦队</view>f

.box{

width:100rpx

height:30rpx//高度不能乱写,你要自己去看你的两行文字占多少高度

font-size:15rpx

overflow:hidden//一定要写

text-overflow: ellipsis//超出省略号

display:-webkit-box//一定要写

-webkit-line-clamp: 2//控制行数

-webkit-box-orient: vertical//一定要写

}

需求:为了引导用户去支付我们的产品,新增需求:1、文本多于一行的时候,只显示一行。2、文本等于1行的时候,全部隐藏显示阴影。

实现思路:1、css里设置view的line-height,我这里设置了25px。

2、然后动态算出这个view在填充完数据后的高度,我这里填充完数据是200px。3、所以行数=view的高度/line-height,也就是200px/25px = 8行。

注意:这里的view一定要是填充完数据后的高度,也就是this.setData后的高度。

顺便提下,我这里给文字设置阴影的方法是:

想实现小程序中组件text最多显示两行内容,如果超出就省略号,搞了半天都没师兄,百度出来的全都不对,这可和微信开发者工具的版本有关系.因为我发现好多效果和例子实现出来的完全不一样,mmp!

white-space: nowrap 网上很多博客都有whiteice-space,我设置了就不行,删除了就对了


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/8055512.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-13
下一篇 2023-04-13

发表评论

登录后才能评论

评论列表(0条)

保存