微信小程序开发-CSS控制Text只显示若干行数

让text组件显示若干行数,多余的部分省略

效果图

显示三行的效果图
在这里插入图片描述

代码

<text class='intro_info'>{{item.introduction}}</text>
/*设置text显示行数,多余的省略*/
.intro_info{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;

  margin-top: 10rpx;
  line-height: 29rpx;
  font-size: 26rpx;
  color: darkgray;
}
发布了43 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/include_IT_dog/article/details/96715022