小程序多行/单行文本溢出

本文介绍在小程序中如何使用CSS样式限制text标签内文本的显示长度,并在超出部分添加省略号,实现优雅的文本截断效果。文中提供了多行及单行文本截断的样式设置代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(转载)https://my.oschina.net/u/2276921/blog/829937
在做小程序的时候遇到在text标签里面的文本过长,需要限制显示长度,并且在限制了长度的后面加上省略号代表后面还有内容。

这时候设置样式:

.note_item text{
display: -webkit-box;
font-size:28rpx;
color:#000000;
line-height: 40rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
text-overflow:ellipsis;
}
如果只显示单行的话:

.note2_item text{
display: block;
font-size:28rpx;
color:#000000;
line-height: 40rpx;
height: 120rpx;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
这里两个display是不同的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值