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

 先來回顧下，單行文本換行的寫法：

html代碼

A20 Banana Pi Development Board Module - Deep Blue

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代碼

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

轉載請註明來自 520UED http://www.520ued.com/article/54192b4b8d31c11e3b000400