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


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:


CSS代碼
Demo

最新評論