單行文字省略號

顯示省略號

文字不換行

1. 設定了display:-webkit-box;

多行文字省略號

因使用了WebKit的CSS擴充套件屬性，該方法適用於WebKit瀏覽器及移動端；

注：

1. -webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
2. display:-webkit-box;必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。
3. -webkit-box-orient必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式。

小程式-文字省略號

單行：在以上基礎上，新增.display: block;

注：小程式如果是text型別，新增省略號，多個text內容會換行，無法自適應排版。

可以換個方案：

1   // 對文字新增省略號
2   getTrimmedText = (text: string, maxLength: number = 8) => {
 
3     var trimmedText = text;
4     if (text && maxLength > 0 && text.length > maxLength) {
5       trimmedText = text.slice(0, maxLength) + '...';
6     }
7     return trimmedText;
8   }