最近用uni-app开发小程序过程中,遇到问题:没有设置文本显示行数,文字多的时候溢出挡住下面的问题,后面改成如下效果。
效果图
代码
.info {
width: 296rpx;
height: 56rpx;
padding: 16upx;
font-size: 20upx;
font-weight: 500;
color: #333333;
line-height: 28upx;
display: flex;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: normal;//处理元素中的 空白
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 2;
-moz-box-orient: vertical;
overflow-wrap: break-word;
word-break: break-all;
image {
width: 53upx;
height: 30upx;
}
text {
margin-left: 4upx;
}
}
<div class="info">
<image src="https://smilefacej.oss-cn-chengdu.aliyuncs.com/chujian-ai/hot_marker.png">
</image>
<text>{{text}}</text>
</div>