單行文本溢出省略號一般我們都知道實現方法。

.xxx {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;
}

那么如果多行文本應該怎么做呢，偉大的chrome 又走在了時代前沿，可以使用-webkit-line-clamp這個屬性來實現，這個屬性已經有年頭了，但是其他瀏覽器仍然不支持，一聲嘆息。

.xxx {    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;    overflow:hidden;
}

-webkit-line-clamp為行數，如果顯示3行，則設置為3即可。

悲劇的是-webkit-line-clamp只有webkit 內核支持，于是我們要想辦法解決這個問題，純css 完美實現是不顯示了，只能優雅降級，可以使用下面的方案，把最大高度設置為n倍行高，然后溢出部分隱藏即可。

.xxx {    line-height: 1.2;    max-height: 2.4em;    overflow: hidden;
}

這樣做的好處是可以忽略文本的長度，即使文本很短不會出現問題。如果確定文本是肯定溢出的，還可以使用::after偽類來模擬…

大致代碼

.xxx {    line-height: 1.2;    max-height: 2.4em;    overflow: hidden;    position: relative;
}.xxx:after {
    content:"...";    position:absolute;    bottom: 0;    right: 0;    background-color: #fff;
}

考慮到文本不一定會溢出，最終的解決方案推薦

.xxx {    line-height: 1.2;    max-height: 2.4em;    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;    overflow:hidden;
}