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

在做小程序的时候遇到在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是不同的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容