CSS換行文本溢出顯示省略號

2017-05-12 1362 0 編輯:深圳網站建設 來源:互聯網

CSS換行文本溢出顯示省略號

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

先來回顧下,單行文本換行的寫法:

html代碼

<p class="title">A20 Banana Pi Development Board Module - Deep Blue</p>

CSS代碼

.title{

    width: 150px;

    height: 25px;

    line-height: 25px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

Demo

上面的代碼是早就有的標準單行文本溢出省略號的寫法,在非常多的場景下我相信大家都可能使用過這種寫法。

多行的顯示該如何解決呢,后面經過一番google后,我找到了chrome的一個API可以解決上面提到的需求-webkit-line-clamp,可惜這個API居然目前只有chrome才能支持,而且并沒有列入W3C的標準范湊內,也就是日后這個功能也只能是在chrome下才能用,這實在太可惜了,不過現在的移動端都是用的webkit的內核,所以可以放心的使用上面的API,接著來看下實現Demo:

html代碼

<p class="title">A20 Banana Pi Development Board Module - Deep Blue</p>

CSS代碼

.title{

    width:150px;

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾