ss元素溢出

當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。

overflow的設置項：

1、visible 默認值。內容不會被修剪，會呈現在元素框之外。

2、hidden 內容會被修剪，并且其余內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。

3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

5、inherit 規定應該從父元素繼承 overflow 屬性的值。

元素溢出示例：

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

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

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

實際效果

html代碼

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

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

實際效果

html代碼

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

第三種：利用 javascript。

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

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

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

說css最常見的知識，實現單行、雙行文本溢出顯示省略號！如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。

效果如下：

多行文本溢出顯示省略號的方法：