之前做小程序開發(fā)時(shí)，遇到要實(shí)現(xiàn)過(guò)長(zhǎng)文本進(jìn)行的折疊的效果（類型微信朋友圈那種）。主要交互有三點(diǎn)：

1. 讓文本過(guò)長(zhǎng)時(shí)折疊、并顯示一個(gè)“全文”的點(diǎn)擊文本
2. 當(dāng)用戶點(diǎn)擊“全文”則會(huì)展開被折疊的文本，并切換該按鈕為“收起”
3. 對(duì)不過(guò)長(zhǎng)的文本則正常顯示

本質(zhì)上，要實(shí)現(xiàn)這個(gè)效果得解決兩個(gè)問題：

• 判斷文本是否過(guò)長(zhǎng)的標(biāo)準(zhǔn)
• 文本過(guò)長(zhǎng)時(shí)樣式如何折疊

判斷文本是否過(guò)長(zhǎng)

所謂文本過(guò)長(zhǎng)就是文本占據(jù)的高度太大，之所以要判斷這個(gè)，是為了能告知邏輯層控制“全文”按鈕的展示與切換。如果沒這個(gè)交互，完全可忽略這個(gè)問題。

而最直接的文本過(guò)長(zhǎng)判斷標(biāo)準(zhǔn)，是文本行數(shù)超過(guò)某個(gè)值。在瀏覽器端，可通過(guò)DOM獲取容器高度和文本的行高，來(lái)計(jì)算文本顯示的行數(shù)；但小程序中并沒有給js訪問文本行數(shù)或組件高度的接口，我們無(wú)從獲知行數(shù)過(guò)多告知邏輯層。

所以，只能退而求其次，采用字符數(shù)來(lái)作為文本過(guò)長(zhǎng)的標(biāo)準(zhǔn)。至于多少字符算過(guò)長(zhǎng)，可綜合容器寬度、字符（中文字符會(huì)占兩個(gè)英文字符寬度）、字體、字號(hào)，和設(shè)計(jì)師確認(rèn)。但顯然這種做法還有問題，比如遇到每行字符數(shù)很少時(shí)仍會(huì)顯示許多行、而不進(jìn)行文本過(guò)長(zhǎng)的處理，違背我們折疊過(guò)長(zhǎng)文本的初衷。

文本過(guò)長(zhǎng)如何折疊

一個(gè)簡(jiǎn)單的思路是用行高算出一個(gè)固定的高度，只顯示前幾行，但該做法過(guò)于依賴樣式的實(shí)現(xiàn)、不利于維護(hù)。在小程序中，我們可采用移動(dòng)端頁(yè)面開發(fā)中一個(gè)hack技術(shù)：-webkit-line-clamp，這個(gè)webkit內(nèi)核私有的CSS屬性用于設(shè)置留在容器中的文本行數(shù)，讓其余的文本處于“溢出”狀態(tài)。接下來(lái)只要結(jié)合text-overflow: ellipsis;和overflow: hidden;就能達(dá)到讓過(guò)長(zhǎng)的文本只顯示前幾行的效果，即“折疊”。

-webkit-line-clamp的使用有幾個(gè)注意點(diǎn)：

• 兼容性。其在Chrome、Safari、QQ等webkit系瀏覽器都很可靠。而微信小程序的View渲染引擎WKWebView和X5也都是從webkit改過(guò)來(lái)的，兼容性有較好的保障
• 該屬性有個(gè)使用前提：需在文本容器開啟webkit瀏覽器私有的Flex布局—display: webkit-box;，并將設(shè)置子元素的排列方式為-webkit-box-orient: vertical;
• 該屬性對(duì)行數(shù)的計(jì)算是依據(jù)inline元素來(lái)的，只會(huì)計(jì)算inline元素的行數(shù)

基于第三點(diǎn)，在涉及到文本分段時(shí)，為了實(shí)現(xiàn)按指定的行數(shù)折疊，就不能把每段輸出到一個(gè)block元素（比如view組件）中了。那要怎么分段呢？雖然小程序沒有<br>這種東西，但好在其text組件支持轉(zhuǎn)義字符，我們可以把每段輸?shù)揭粋€(gè)text組件中，并在text組件結(jié)尾加上\n來(lái)實(shí)現(xiàn)分段。

總結(jié)

以上，總結(jié)下小程序下文本過(guò)長(zhǎng)折疊的思路：文本過(guò)長(zhǎng)由邏輯層判斷字符數(shù)確定，控制“全文”按鈕的展示與切換。過(guò)長(zhǎng)時(shí)應(yīng)用-webkit-line-clamp樣式折疊文本，再次展開文本只要撤銷該樣式。