首先，我們做個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，也能實現單行的效果。