微信小程序之单行溢出隐藏和双行溢出隐藏

首先，我们做个text，加入了一个长文本，就像下面那样：

wxml :

<view class="container">
  <text>刘德华（Andy Lau），1961年9月27日出生于中国香港，华语影视男演员、流行乐歌手、电影制片人、作词人。</text>
</view>

wxss :

.container {
  margin-top: 500rpx;
  font-size: 38rpx;
  padding: 0 50rpx;
}

这个时候，我们需求是，文本只显示一行，多余的隐藏并显示成三个点。

此时，就要用到溢出隐藏三件套了：

.container text {
  /* 将text控件当做block处理，不然就不起作用了 */
  display: block;
  /* 不换行的标识 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 隐藏部分用省略号代替 */
  text-overflow: ellipsis;
}

假如，我们要显示两行呢？

 如下修改：

/* 两行显示，多余隐藏，隐藏部分省略号显示 */
  /* 将text当做弹性盒子处理 */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 竖向对齐 */
  -webkit-box-orient: vertical;
  /* 显示行数，2就是显示2行 */
  -webkit-line-clamp: 2;

效果：

我发现 -webkit-line-clamp 改成1，也能实现单行的效果。