超過兩行...,只有兩行或少於兩行無...且沒有檢視更多文字 關鍵思路：超過兩行...用ellipsis,但是為了判斷文字是否多餘兩行，所以要獲取節點的高度，如果大於兩行則文字出現，否則沒有更多文字
阿新 • • 發佈：2018-12-17
關鍵程式碼：
This.dataList = this.dataList.map((item,index)=>{
Let showFlag = this.$refs.textContent[index].offsetHeight > 44 ? true : false
If(this.$refs.textContent[index].offsetHeight > 44){
This.$refs.textContent[index].style.overflow = ‘hidden’
This.$refs.textContent[index].style.textOverflow = ‘ellipsis’
This.$refs.textContent[index].style.display = ‘-webkit-box’
}
})
//因為原生的style中沒有屬性-webkit-line-clamp: 2; -webkit-box-orient: vertical;
所以直接寫在css中，最後要切樣式 overflow: auto; text-overflow: clip; display: block;-webkit-line-clamp: none; -webkit-box-orient: inherit; line-height: 22px;