微信小程序之文本单行/多行溢出文本省略号代替

在微信小程序中的详情介绍中，一般会用到该功能，刚开始，我给文本加了高,

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

}

显示出的效果如下：

所以，要注意，在编写这类的溢出文本显示的时候，注意不要规定高。