前言
視圖(View)渲染長文本時,受限于視圖的寬度(Width),長文本可能需要顯示多行,才可以將長文本的內容全部展示出來;也就是說,文本行高(FontSize * LineHeight)一定的情況下,視圖的高度(Height)取決于長文本渲染完成之后的行數(Line)。如果頁面布局要求視圖的高度必須是固定的,本質上就可以通過限制長文本的顯示行數來實現。
本文介紹兩種長文本限制顯示行數的方案。
CSS -webkit-line-clamp
這個 CSS 屬性的名稱有點兒與眾不同,前面帶有 -webkit- 前綴,先說一下這個屬性為什么能夠被使用。
官方文檔中關于 小程序運行環(huán)境 的介紹:

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 行開始的內容會被隱藏,效果如下:

目前使用這種文案,文本末尾的省略號是不支持修改或移除的(社區(qū)已有同學反饋些問題,官方尚無回復),如果不能滿足需求,就需要使用第二種方案。
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 行,預定高度應該如何計算?
其余內容請參考 小程序長文本限制顯示行數。
浙公網安備 33010602011771號