微信小程序之文本单行/多行溢出文本省略号代替
程序员文章站
2022-04-22 13:46:43
...
在微信小程序中的详情介绍中,一般会用到该功能,刚开始,我给文本加了高,
.earing_info{
width:96%;
height:20%;
margin-top:30rpx;
margin-left: 2%;
display: -webkit-box;
font-size:28rpx;
color:#000000;
line-height: 40rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow:ellipsis;
}
但是这种写法是错误的,虽然按照上面写的显示出第一行有省略号,但是还是会出现溢出的文本,如下图所示:
但是删除高之后,代码如下:
.earing_info{
width:96%;
margin-top:30rpx;
margin-left: 2%;
display: -webkit-box;
font-size:28rpx;
color:#000000;
line-height: 40rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow:ellipsis;
}
显示出的效果如下:
所以,要注意,在编写这类的溢出文本显示的时候,注意不要规定高。
上一篇: 2010最新牛语录
下一篇: 文本单行超出和多行超出显示省略号