微信小程序之text文本溢出时单行/多行的最后加省略号

单行时：

wxml：

<view class='aa'>
   <text class='bb'>单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本</text>
</view>

 css：

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;
  height: 80px;     
  line-height: 40px;
  /* 超出部分隐藏 */
  overflow: hidden;    
  /* 文本单行不换行   */
  white-space: nowrap;    
  /* 末尾加省略号 */
  text-overflow:ellipsis;  
  background: red;
}

最终效果：

 

多行时：

wxml：

<view class='aa'>
   <text class='bb'>多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本</text>
</view>

css：

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;   
  line-height: 40px;
  /* 超出部分隐藏 */
  overflow: hidden;     
  /* 末尾加省略号 */
  text-overflow:ellipsis;  

  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  /* 行数，也可以设为1，用来做单行 */
  -webkit-line-clamp:2;

  background: red;
}

这个方法也可以用来做单行，但是这个方法也有缺陷，例如我们给他设置一个height：

 

就会变成这样：

省略号还是在第二行末尾，但是文本还是完整的显示了出来，所以这个方法最好不要设置height，就算设置了，也不要超过你需要的行数，不然就会完整的显示出你省略掉的内容。