如何利用CSS實現標題文字過長部分顯示省略符號

這篇文章主要介紹了CSS實現標題文字過長部分顯示省略符號的方法,並且講解了針對單行文字溢出和多行文字溢出的情況,需要的朋友可以參考下

前段時間在公司移動站的重構，遇到了一個產品列表title的需求是只顯示兩行，然後超過兩行的字元用省略符號顯示。如的效果，當時第一感覺是這個需求只能通過後台輸出的時候截取字元去處理，或者通過JS計算字元來處理，因為樣式無法控制換行文本出現省略，但是因為我們新版的移動站是流式布局，在不同解析度下的手機換行的寬度是不確定的，所以就沒有標準的字元截取的數量範圍。例如：15個字在iphone上面是兩行顯示，但是在三星上就可能不是兩行顯示了，有可能值顯示一行，又或者在解析度更低的手機15字已經是三行顯示了，遇到了這種情境就很頭痛了。
先來回顧下，單行文本換行的寫法：

A20 Banana Pi Development Board Module - Deep Blue

CSS代碼

.title{       width: 150px;       height: 25px;       line-height: 25px;       overflow: hidden;       whitewhite-space: nowrap;       text-overflow: ellipsis;   }

Demo
上面的代碼是早就有的標準單行文本溢出省略符號的寫法，在非常多的情境下我相信大家都可能使用過這種寫法。
多行的顯示該如何解決呢，後面經過一番google後，我找到了chrome的一個API可以解決上面提到的需求-webkit-line-clamp，可惜這個API居然目前只有chrome才能支援，而且並沒有列入W3C的標準範湊內，也就是日後這個功能也只能是在chrome下才能用，這實在太可惜了，不過現在的移動端都是用的webkit的核心，所以可以放心的使用上面的API，接著來看下實現eg:

A20 Banana Pi Development Board Module - Deep Blue

CSS代碼

.title{       width:150px;       overflow : hidden;       text-overflow: ellipsis;       display: -webkit-box;       -webkit-line-clamp: 2;       -webkit-box-orient: vertical;   }

Demo

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！