超出文本截取替換爲省略號

今天作了一個以下圖的模塊

其中，標題以及介紹這兩塊都須要作超出某個寬度就截取一行或兩行文字，後面用省略號代替。

因爲是作的手機頁面，用JS來開銷太大，只能從CSS入手。

一行的很好解決。

以下就OK了。

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

多行的想了好久，好比，寫定行高，超出隱藏，弄個省略號做爲補丁打在尾部。可是有個問題，頁面寬度不固定，可能會出現只遮住一半字的狀況，看起來很Low。

繼續查找資料，CSSV5啊！

-webkit-line-clamp屬性能夠控制截取文本行數

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;