微信小程序text文本溢出单行/多行省略

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RELY_ON_YOURSELF/article/details/82148099

写小程序时根据业务需要，有时候text需要单行截断 , 或者多行截断 ，需要限制显示长度，并且在限制了长度的后面加上省略号代表后面还有内容。

效果图:

多行截断:

.hotel_name {
  font-weight: 700;
  display: -webkit-box;
  font-size: 36rpx;
  color: #333;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

单行截断:

.title {
  margin-left: 14rpx;
  display: block;
  font-size: 26rpx;
  color: #999;
  line-height: 26rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

注意:如果text的父容器没有具体的宽度 , 会导致截断时没有省略号(…)