CSS實現(xiàn)標(biāo)題文字過長部分顯示省略號的方法
520ued 發(fā)布時間:2016-05-27 13:58:25 作者:owenhong
我要評論

這篇文章主要介紹了CSS實現(xiàn)標(biāo)題文字過長部分顯示省略號的方法,并且講解了針對單行文字溢出和多行文字溢出的情況,需要的朋友可以參考下
前段時間在公司移動站的重構(gòu),遇到了一個產(chǎn)品列表title的需求是只顯示兩行,然后超過兩行的字符用省略號顯示。如下圖的效果,當(dāng)時第一感覺是這個需求只能通過后臺輸出的時候截取字符去處理,或者通過JS計算字符來處理,因為樣式無法控制換行文本出現(xiàn)省略,但是因為我們新版的移動站是流式布局,在不同分辨率下的手機(jī)換行的寬度是不確定的,所以就沒有標(biāo)準(zhǔn)的字符截取的數(shù)量范圍。例如:15個字在iphone上面是兩行顯示,但是在三星上就可能不是兩行顯示了,有可能值顯示一行,又或者在分辨率更低的手機(jī)15字已經(jīng)是三行顯示了,遇到了這種場景就很頭痛了。
先來回顧下,單行文本換行的寫法:
A20 Banana Pi Development Board Module - Deep Blue
CSS代碼
Demo
上面的代碼是早就有的標(biāo)準(zhǔn)單行文本溢出省略號的寫法,在非常多的場景下我相信大家都可能使用過這種寫法。
多行的顯示該如何解決呢,后面經(jīng)過一番google后,我找到了chrome的一個API可以解決上面提到的需求-webkit-line-clamp,可惜這個API居然目前只有chrome才能支持,而且并沒有列入W3C的標(biāo)準(zhǔn)范湊內(nèi),也就是日后這個功能也只能是在chrome下才能用,這實在太可惜了,不過現(xiàn)在的移動端都是用的webkit的內(nèi)核,所以可以放心的使用上面的API,接著來看下實現(xiàn)eg:
A20 Banana Pi Development Board Module - Deep Blue
CSS代碼
Demo
先來回顧下,單行文本換行的寫法:
復(fù)制代碼
代碼如下:A20 Banana Pi Development Board Module - Deep Blue
CSS代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- .title{
- width: 150px;
- height: 25px;
- line-height: 25px;
- overflow: hidden;
- whitewhite-space: nowrap;
- text-overflow: ellipsis;
- }
上面的代碼是早就有的標(biāo)準(zhǔn)單行文本溢出省略號的寫法,在非常多的場景下我相信大家都可能使用過這種寫法。
多行的顯示該如何解決呢,后面經(jīng)過一番google后,我找到了chrome的一個API可以解決上面提到的需求-webkit-line-clamp,可惜這個API居然目前只有chrome才能支持,而且并沒有列入W3C的標(biāo)準(zhǔn)范湊內(nèi),也就是日后這個功能也只能是在chrome下才能用,這實在太可惜了,不過現(xiàn)在的移動端都是用的webkit的內(nèi)核,所以可以放心的使用上面的API,接著來看下實現(xiàn)eg:
復(fù)制代碼
代碼如下:A20 Banana Pi Development Board Module - Deep Blue
CSS代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- .title{
- width:150px;
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
相關(guān)文章
- 這篇文章主要介紹了css多行文本溢出時出現(xiàn)省略號的示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-13
- 本篇文章主要介紹了純CSS定制文本省略的方法大全,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-16
css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例
下面小編就為大家?guī)硪黄猚ss3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-10- 這篇文章主要介紹了CSS樣式 解決文字過長顯示省略號問題,本文通過實例代碼截圖給大家展示的非常詳細(xì),需要的朋友可以參考下2019-12-17