上篇文章中，我做了個單行文本溢出顯示省略號的實例，今天應各位網友的要求，寫個多行文本溢出顯示省略號的實例。

通過上篇文章的實例，大家都知道，單行溢出顯示省略號也就一行代碼的事，但是要實現多行文本溢出顯示省略號那就有些難度了，為什么這么說呢，做前端開發的網友都知道，每個瀏覽器不一樣，所以兼容性很難做到完美，那今天我就把我知道的幾種方法寫出來跟大家分享。

第一種方法：使用WebKit的CSS擴展屬性

實際效果

html代碼

注：這種方法適用于 WebKit 瀏覽器及移動端，不過好像現在主流的瀏覽器都是雙核的，就是 chrome 內核，那么可以直白的告訴你，像什么google瀏覽器，360安全瀏覽器，搜狗瀏覽器，QQ瀏覽器等等等等雙核瀏覽器在 chrome 內核下都是完美支持的。

第二種方法：利用css偽元素

實際效果

html代碼

注：這種方法效果沒有第一種好，這個說白了就是在 box 容器中加了個 after 偽元素，然后利用 position 定位，把多余的內容擋住達到顯示省略號的目的。這種方法呢就可以兼容到 ie8 及以上瀏覽器。但有一個缺點不得不說，那就是這個省略號是一直都在的，可鬧心了，所以小編特不喜歡用這個方法。

第三種：利用 javascript。

所謂利用 javascript，說白了就是用js根據上面的思路去模擬，實現起來也不難，小編曾經用過一個，名字是：Clamp.js ，這個用起來比較簡單，我在這里就不作演示了，大家可以去百度一下。

以上幾種方法就是小編所知道的內容溢出解決方案，具體大家可以根據自己的需要去選用方法。但是小編認為，實現內容溢出省略號的方法肯定不止這些，辦法總比困難多嘛。

謝謝你的閱讀，如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我，我會定期回復，碼農劉小橋與你一起學習，共同進步。

果網頁要呈現的是動態信息，比如新聞之類的，字數可能就無法控制。

UI設計的完美布局有可能被溢出的內容搞砸。

這種情況可以由后臺處理，把將要呈現到前端的信息截取合適的長度。不過這樣感覺后臺的壓力好大，布局變化一次，就要重新計算一下要截什么長度才合適。

CSS可以完美解決這個問題。

如上圖所示，overflow和text-overflow配合使用，可以把超出范圍部分文字將被隱藏，并且使用省略號替換了文字最后部分。以下是效果圖：

為了做出文本溢出的效果，代碼中使用了white-space:norap，可以強制文本不換行。

就到這里 See you next time @_@