4種方法實現單行、多行——文本溢出顯示省略號

1、單行溢出
在前端基礎，單行文本的溢出顯示省略號，這種作法咱們一般用text-overflow來實現，而後給元素定寬，超出隱藏，具體以下面一段代碼：

顯示效果：

2、那麼多行文本溢出呢？具體代碼以下：


顯示效果：

說明：
一、該方法不支持ff，主要是-webkit-line-clamp這一屬性不是標註的一部分，多是webkit內部使用的，或者被棄用的。根據存在即合理的原則，也被不少人發現，不妨試一試。

二、display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示

三、-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式

3、這也是多行文本溢出，採用的:after來解決的。具體代碼以下：

顯示效果如圖：

說明：該方法適用範圍廣，但在文字未超出行的狀況下也會出現省略號,可結合js優化該方法。因此的注意一下幾點：
一、將height設置爲line-height的整數倍，防止超出的文字露出。

二、給texts::after添加漸變背景可避免文字只顯示一半。

三、因爲ie6-7不顯示content內容，因此要添加標籤兼容ie6-7（如：<span>…<span/>）；兼容ie8須要將::after替換成:after。

4、咱們能不用js的方法來實現了？答案也是能夠的 。具體代碼以下：

html 代碼：

css代碼：

js代碼：

效果如圖：

經過從後向前逐個刪除末尾字符，直至元素的高度小於父元素高度，到達效果，這種方法能夠兼容各類瀏覽器。