之前做小程式開發時，遇到要實現過長文字進行的摺疊的效果（型別微信朋友圈那種）。主要互動有三點：
- 讓文字過長時摺疊、並顯示一個“全文”的點選文字
- 當使用者點選“全文”則會展開被摺疊的文字，並切換該按鈕為“收起”
- 對不過長的文字則正常顯示
本質上，要實現這個效果得解決兩個問題：
- 判斷文字是否過長的標準
- 文字過長時樣式如何摺疊
判斷文字是否過長
所謂文字過長就是文字佔據的高度太大，之所以要判斷這個，是為了能告知邏輯層控制“全文”按鈕的展示與切換。如果沒這個互動，完全可忽略這個問題。
而最直接的文字過長判斷標準，是文字行數超過某個值。在瀏覽器端，可通過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樣式摺疊文字，再次展開文字只要撤銷該樣式。