首先，我们做个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，也能实现单行的效果。