微信小程式（5）——文字溢出斷尾顯示省略号

▍寫在前面（來訪者請直接浏覽下一條）

在寫頁面的時候遇到一個問題：需要對某件商品進行描述，但是往往描述文字過長，如果全部一次性顯示可能對樣式的一緻性造成破壞，影響頁面美觀，于是我聯想到了之前在很多網站上見過省略部分文字的方法，決定自己實踐一次。

▍效果預覽

先貼上最終實踐效果：

▍實作方法

【注意】為了能更清晰的了解文字超限斷尾的使用方法，以下所有css代碼将省略全部關于字型以及顔色設定的樣式。

1、文字超出一行，省略超出部分（不限制寬度）：

.list-item-instructions {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
           

因為我的父元素是flex布局，而右側的文字部分沒有設定寬度，是以将左側的圖檔給擠壓到很窄了；另外，隻顯示了一行文字，最後面顯示的是“…”：

因而為了不造成樣式的擠壓，是以需要給文字區域設定寬度。

2、文字超出一行，省略超出部分（限制寬度）：

.list-item-instructions {
  width: 490rpx;
  max-width: 490rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
           

這樣寬度設定好了，也就不會對圖檔造成擠壓了。

但是下面的區域空白還是有些不太合适，是以我還想自定義顯示的行數。

3、自定義顯示的行數：

.list-item-instructions {
  /* 控制寬度 */
  width: 490rpx;
  max-width: 490rpx;
  /* 控制顯示的行數 */
  max-height: 150rpx;
  line-height: 30rpx;
  /* 顯示多行 */
  display:-webkit-box; 
  overflow:hidden; 
  /* 5為顯示的行數 */
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
}
           

這就就大功告成了：

▍後記

當然上面的效果圖是在微信開發者工具裡實作的，當我在手機上檢視的時候，發現樣式跟開發者工具上的還是存在一些差别（在省略号的下一行竟然還會有文字出現）。