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

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樣式折疊文本，再次展開文本只要撤銷該樣式。