超過兩行...,只有兩行或少於兩行無...且沒有查看更多文字 關鍵思路:超過兩行...用ellipsis,可是爲了判斷文字是否多餘兩行,因此要獲取節點的高度,若是大於兩行則文字出現,不然沒有更多文字

關鍵代碼:css

This.dataList = this.dataList.map((item,index)=>{web

Let showFlag = this.$refs.textContent[index].offsetHeight > 44 ? true : falsethis

If(this.$refs.textContent[index].offsetHeight > 44){spa

This.$refs.textContent[index].style.overflow = ‘hidden’ip

This.$refs.textContent[index].style.textOverflow = ‘ellipsis’it

This.$refs.textContent[index].style.display = ‘-webkit-box’cli

}List

})webkit

 

//由於原生的style中沒有屬性-webkit-line-clamp: 2; -webkit-box-orient: vertical;map

因此直接寫在css中,最後要切樣式 overflow: auto; text-overflow: clip; display: block;-webkit-line-clamp: none; -webkit-box-orient: inherit; line-height: 22px;

相關文章
相關標籤/搜索