前言

檢視（View）渲染長文字時，受限於檢視的寬度（Width），長文字可能需要顯示多行，才可以將長文字的內容全部展示出來；也就是說，文字行高（FontSize * LineHeight）一定的情況下，檢視的高度（Height）取決於長文字渲染完成之後的行數（Line）。如果頁面佈局要求檢視的高度必須是固定的，本質上就可以通過限制長文字的顯示行數來實現。

本文介紹兩種長文字限制顯示行數的方案。

CSS -webkit-line-clamp

這個 CSS 屬性的名稱有點兒與眾不同，前面帶有 -webkit- 字首，先說一下這個屬性為什麼能夠被使用。

官方文件中關於 小程式執行環境 的介紹：

WKWebView、chromium定製核心 和 Chrome WebView 都是基於 WebKit

WebKit 是什麼？WebKit 是一個跨平臺的 Web 瀏覽器引擎，相當於小程式頁面的渲染都是通過 WebKit 完成的。WebKit 除了支援 CSS 的標準屬性之外，還支援不少擴充套件屬性，這些屬性的名稱以 -webkit- 為字首，-webkit-line-clamp 就是其中之一，它可以把塊容器（Block Container）中的內容限制為指定的行數，使用時需要和其它幾個屬性聯合使用：

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

<view class="clamp">
  <text>長文字內容</text>
</view>
 

-webkit-line-clamp: 6; 表示限制文字最多顯示為 6 行，如果文字實際顯示超過 6 行，第 6 行末尾會出現省略號（...），從第 7 行開始的內容會被隱藏，效果如下：

目前使用這種文案，文字末尾的省略號是不支援修改或移除的（社群已有同學反饋些問題，官方尚無回覆），如果不能滿足需求，就需要使用第二種方案。

JavaScript

檢視中的文字內容按預設方式渲染完成之後，獲取檢視的高度，如果檢視的高度超過預定高度，使用 CSS 設定檢視高度值為預定高度，以及隱藏溢位文字內容；如果檢視的高度未超過預定高度，什麼也不做。

使用檢視 iview 渲染長文字：

.default {
  font-size: 15px;
  line-height: 1.6;
  
  word-break: break-all;
}

<view id="iview" class="default">
  <text>長文字內容</text>
</view>
 

獲取檢視 iview 的高度：

const query = wx.createSelectorQuery()

query.select('#iview').boundingClientRect()

query.exec(function (res) {
  // 檢視高度
  const viewHeight = res[0].height
  
  ...
})

如果檢視文字限制最多顯示 6 行，預定高度應該如何計算？

其餘內容請參考 小程式長文字限制顯示行數。