微信小程序過長文本摺疊效果的探索

以前作小程序開發時，遇到要實現過長文本進行的摺疊的效果（類型微信朋友圈那種）。主要交互有三點：

1. 讓文本過長時摺疊、並顯示一個「全文」的點擊文本
2. 當用戶點擊「全文」則會展開被摺疊的文本，並切換該按鈕爲「收起」
3. 對不過長的文本則正常顯示

本質上，要實現這個效果得解決兩個問題：

• 判斷文本是否過長的標準
• 文本過長時樣式如何摺疊

判斷文本是否過長

所謂文本過長就是文本佔據的高度太大，之因此要判斷這個，是爲了能告知邏輯層控制「全文」按鈕的展現與切換。若是沒這個交互，徹底可忽略這個問題。

而最直接的文本過長判斷標準，是文本行數超過某個值。在瀏覽器端，可經過DOM獲取容器高度和文本的行高，來計算文本顯示的行數；但小程序中並無給js訪問文本行數或組件高度的接口，咱們無從獲知行數過多告知邏輯層。

因此，只能退而求其次，採用字符數來做爲文本過長的標準。至於多少字符算過長，可綜合容器寬度、字符（中文字符會佔兩個英文字符寬度）、字體、字號，和設計師確認。但顯然這種作法還有問題，好比遇到每行字符數不多時仍會顯示許多行、而不進行文本過長的處理，違背咱們摺疊過長文本的初衷。

文本過長如何摺疊

一個簡單的思路是用行高算出一個固定的高度，只顯示前幾行，但該作法過於依賴樣式的實現、不利於維護。在小程序中，咱們可採用移動端頁面開發中一個hack技術：-webkit-line-clamp，這個webkit內核私有的CSS屬性用於設置留在容器中的文本行數，讓其他的文本處於「溢出」狀態。接下來只要結合text-overflow: ellipsis;和overflow: hidden;就能達到讓過長的文本只顯示前幾行的效果，即「摺疊」。

-webkit-line-clamp的使用有幾個注意點：

• 兼容性。其在Chrome、Safari、QQ等webkit系瀏覽器都很可靠。而微信小程序的View渲染引擎WKWebView和X5也都是從webkit改過來的，兼容性有較好的保障
• 該屬性有個使用前提：需在文本容器開啓webkit瀏覽器私有的Flex佈局---display: webkit-box;，並將設置子元素的排列方式爲-webkit-box-orient: vertical;
• 該屬性對行數的計算是依據inline元素來的，只會計算inline元素的行數

基於第三點，在涉及到文本分段時，爲了實現按指定的行數摺疊，就不能把每段輸出到一個block元素（好比view組件）中了。那要怎麼分段呢？雖然小程序沒有<br>這種東西，但好在其text組件支持轉義字符，咱們能夠把每段輸到一個text組件中，並在text組件結尾加上\n來實現分段。

總結

以上，總結下小程序下文本過長摺疊的思路：文本過長由邏輯層判斷字符數肯定，控制「全文」按鈕的展現與切換。過長時應用-webkit-line-clamp樣式摺疊文本，再次展開文本只要撤銷該樣式。