微信小程序text文本溢出单行多行省略

微信小程序text文本溢出单行多行省略,第1张

在做小程序的时候遇到在text标签里面的文本过长,需要限制显档答带示长度,并且在举燃限制了长度的后面加上

省略号代表后面还有内容。

我们css可以这么写

我们只需要这一部分

并且修改这个可以修改显行芦示的行数

然后修改高度就可以完美显示我们想要的行数。

<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//一定要写

}

问题:在微信小程序使用canvas绘制多行文本(文本内容含回车换弊老森行符)时,Android正常,iOS出现文本重叠问题。

解决方案:去除回车换行符 text.replace(/[\r\n]/g, '')

ps:新增英文多行租亩文含猛本换行


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存