CSS怎么實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)

這篇文章主要為大家展示了“CSS怎么實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)”這篇文章吧。

前段時(shí)間在公司移動(dòng)站的重構(gòu)，遇到了一個(gè)產(chǎn)品列表title的需求是只顯示兩行，然后超過(guò)兩行的字符用省略號(hào)顯示。如下圖的效果，當(dāng)時(shí)第一感覺(jué)是這個(gè)需求只能通過(guò)后臺(tái)輸出的時(shí)候截取字符去處理，或者通過(guò)JS計(jì)算字符來(lái)處理，因?yàn)闃邮綗o(wú)法控制換行文本出現(xiàn)省略，但是因?yàn)槲覀冃掳娴囊苿?dòng)站是流式布局，在不同分辨率下的手機(jī)換行的寬度是不確定的，所以就沒(méi)有標(biāo)準(zhǔn)的字符截取的數(shù)量范圍。例如：15個(gè)字在iphone上面是兩行顯示，但是在三星上就可能不是兩行顯示了，有可能值顯示一行，又或者在分辨率更低的手機(jī)15字已經(jīng)是三行顯示了，遇到了這種場(chǎng)景就很頭痛了。
先來(lái)回顧下，單行文本換行的寫(xiě)法：

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
上面的代碼是早就有的標(biāo)準(zhǔn)單行文本溢出省略號(hào)的寫(xiě)法，在非常多的場(chǎng)景下我相信大家都可能使用過(guò)這種寫(xiě)法。
多行的顯示該如何解決呢，后面經(jīng)過(guò)一番google后，我找到了chrome的一個(gè)API可以解決上面提到的需求-webkit-line-clamp，可惜這個(gè)API居然目前只有chrome才能支持，而且并沒(méi)有列入W3C的標(biāo)準(zhǔn)范湊內(nèi)，也就是日后這個(gè)功能也只能是在chrome下才能用，這實(shí)在太可惜了，不過(guò)現(xiàn)在的移動(dòng)端都是用的webkit的內(nèi)核，所以可以放心的使用上面的API，接著來(lái)看下實(shí)現(xiàn)eg:

代碼如下:

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;   
}

以上是“CSS怎么實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！