微信小程序-控制文本只显示若干行多余隐藏

Posted 2022-06-13 Math_X_CS

效果图

显示三行的效果图

代码

<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;