微信小程序之text文本超出隐藏超出部分用省略号表示

一、简介：

在做微信小程序的时候，由于自己搭框架的只有这么大且刚好这么大的界面才美观，因此当我们的文本文字，超出这个范围时就要隐藏。我们不可能只隐藏超出的部分文字，却不提示是否有文字被隐藏了。于是我们可以用省略号表示。

二、代码：

wxml：

<text class="text">（我我我我我我我我我我我我我我我我）（你你你你你你你你你你你你你你）（他他他他他他他他他他他他他)</text>

wxss：

.text{
  color: black;
  width: 90%;
  margin: auto;
  background-color: rgb(184, 247, 247);
  /*设置为弹性盒子*/
  display:-webkit-box;
  /* 表示几行后超出隐藏 */
  -webkit-line-clamp:2;
  /* 超出隐藏 */
  overflow:hidden;
  /*超出显示为省略号*/
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  /*强制英文单词自动换行*/
  word-break:break-all;
}

三、效果图：