一、單行溢位
在前端基礎，單行文字的溢位顯示省略號，這種做法我們通常用text-overflow來實現，然後給元素定寬，超出隱藏，具體如下面一段**：
顯示效果：
二、那麼多行文字溢位呢？具體**如下：
顯示效果：
說明：1、該方法不支援ff，主要是-webkit-line-clamp這一屬性不是標註的一部分，可能是webkit內部使用的，或者被棄用的。根據存在即合理的原則，也被很多人發現，不妨試一試。
2、display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示
3、-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式
三、這也是多行文字溢位，採用的:after來解決的。具體**如下：
顯示效果如圖：
說明：該方法適用範圍廣，但在文字未超出行的情況下也會出現省略號,可結合js優化該方法。所以的注意一下幾點：
1、將height設定為line-height的整數倍，防止超出的文字露出。
2、給texts::after新增漸變背景可避免文字只顯示一半。
3、由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
四、我們能不用js的方法來實現了？答案也是可以的 。具體**如下：
效果如圖：
通過從後向前逐個刪除末尾字元，直至元素的高度小於父元素高度，到達效果，這種方法可以相容各種瀏覽器。
單行 多行文字溢位隱藏
單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...
css實現單行（多行）文字溢位顯示
overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...
css 處理 單行 多行 文字溢位
1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性，...