小程序--设置文字超出时候显示为省略号

最新推荐文章于 2024-07-12 11:50:53 发布

huang_jimei

最新推荐文章于 2024-07-12 11:50:53 发布

阅读量523

点赞数

分类专栏：小程序文章标签： css

本文链接：https://blog.csdn.net/huang_jimei/article/details/106373623

版权

小程序专栏收录该内容

25 篇文章 1 订阅

订阅专栏

（1）设置文字行数为2行（多行显示）
小程序中单位为rpx

.text2{
width: 395rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*两行,超出为省略号*/
-webkit-box-orient: vertical;
align-content: center;
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
margin-top: 15rpx;
}

效果图如下：
在这里插入图片描述
（1）单行显示，超出为省略号.

text2{
width: 395rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /*显示一行，超出为省略号*/
-webkit-box-orient: vertical;
align-content: center;
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
margin-top: 15rpx;
}