首頁 >web前端 >css教學 >如何利用CSS實作標題文字過長部分顯示省略號

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

不言
不言原創
2018-06-20 15:06:312777瀏覽

這篇文章主要介紹了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居然目前只有可惜才能支持,而且並沒有列入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

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

利用CSS實作純英文數字自動換行

實如何使用CSS保持頁面內容的寬高比

#

以上是如何利用CSS實作標題文字過長部分顯示省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn