最近在開發小程式,開發一個小元件,本來開發得差不多了,因為一個多行文字省略號的問題,拖了我一天啊(即使最後較好地解決了啊),可能是自己的開發經驗不足導致了沒能找到好的方案啊,把自己的經歷寫下來吧
一開始,我查了網上的各種資料,其實CSS就足以實現單行文字省略號和多行文字省略號(多行文字省略號主要針對的是-webkit-核心的瀏覽器,因為使用到的屬性是webkit核心自帶的一些私有屬性,非此核心的用其他方案解決,但是針對微信小程式講道理是可以用這些屬性的啊),但是,的的確確,效果很差:
一開始是這樣的:
.xxx {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
在chrome裡面的效果是這樣的啊:

確實沒什麼問題啊,但是一旦到了微信小程式,你就會發現大變樣啊,變得你媽媽都不認識你啊.
想想算了,放棄了,調了半天也不見得好,打算改用js配合DOM的方式來,在編輯器裡都已經把測試程式碼寫好了,結果忘了那是微信小程式,我去,這就跟vuejs一樣,操作DOM是一種笑話,尤其是在小程式裡面,連標籤都不一樣,誰知道會有什麼屬性又怎麼去獲取.
後來,組長提醒了一下,微信小程式有訪問DOM的介面,去官網看了一下,確實有一個createSelectorQuery()的方法,然後開始使用這個方法,以為這樣就可以了,後來遇到非同步問題用promise解決,解決了老半天發現,小程式的資料繫結渲染回頁面的期間,獲取元素高度的方法早就已經返回數值了,好尷尬啊,有人說等他返回啊,這不是promise能解決的,如果你真要等,你的頁面效果會極差,因為你用js配合DOM的方法是這樣去實現省略號的,迴圈判斷當前元素高度,如果當前元素高度超過目標行數高度,那麼字串就減一直到滿足條件後,補上”…”,這樣的方式,你每次都等並不現實,後來改進了一下想法,判斷一行會有幾個字,只要高度發生變化,就可以知道已經是整行整行的字元了,這個時候,就可以直接減去相應的字元達到要求,但是還是那個問題,沒法判斷什麼時候高度減小了
後來經人提醒,可以用螢幕寬度配合font-size來實現這個省略號,我才恍然大悟啊,直接獲取螢幕寬度,然後減去多餘的margin,padding,然後除以font-size取整,這樣之後,就獲取了每一行的文字,然後直接擷取長度,拼接即可,然後自己再微調一下即可啊.
感覺自己好蠢啊~~~~