讓文字過長時摺疊、並顯示乙個「全文」的點選文字當使用者點選「全文」則會展開被摺疊的文字，並切換該按鈕為「收起」對不過長的文字則正常顯示
本質上，要實現這個效果得解決兩個問題：
判斷文字是否過長的標準文字過長時樣式如何摺疊所謂文字過長就是文字佔據的高度太大，之所以要判斷這個，是為了能告知邏輯層控制「全文」按鈕的展示與切換。如果沒這個互動，完全可忽略這個問題。
而最直接的文字過長判斷標準，是文字行數超過某個值。在瀏覽器端，可通過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元件）中了。那要怎麼分段呢？雖然小程式沒有
這種東西，但好在其text元件支援轉義字元，我們可以把每段輸到乙個text元件中，並在text元件結尾加上\n來實現分段。
以上，總結下小程式下文字過長摺疊的思路：文字過長由邏輯層判斷字元數確定，控制「全文」按鈕的展示與切換。過長時應用-webkit-line-clamp樣式摺疊文字，再次展開文字只要撤銷該樣式。
微信小程式 摺疊展開效果
wxml class page class li bindtap changetoggle class left 總數view class right gray 8view view class li data index 0 bindtap changetoggle class left 類別1v...
微信小程式canvas文字換行效果
我們在canvas上繪製多行文字的時候，不可能一行一行的繪製，這時就需要到了換行這個功能。文字換行 引數 1 canvas物件，2 文字 3 距離左側的距離 4 距離頂部的距離 5 不用管 6 文字的寬度 文字換行 引數 1 canvas物件，2 文字 3 距離左側的距離 4 距離頂部的距離 5 6...
微信小程式 toptip效果
效果 預設2秒展示,上移動畫隱藏 展示頂部 tip 多次快速呼叫,會覆蓋前次展示 uicomponent.showtoptip function opt if typeof opt string 預設引數,也是外部參考的傳參 var defaultoptions self.setdata self....