css 文字兩行顯示，超出省略號表示
重點：text-overflow: ellipsis;只對display：inline；起作用
例子：我說說打瞌睡黨風建設打火機說說色兒ab
//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//兩行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
如果實現單行文字的溢位顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。
實現方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如圖：
但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。
接下來重點說一說多行文字溢位顯示省略號，如下。
實現方法：
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
overflow: hidden;
效果如圖：
適用範圍：
因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；
注：-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
實現方法：
pp::after
效果如圖：
適用範圍：
該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注：
css文字溢位省略
在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證布局不會錯亂，就需要對文字的長度進行限定。在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box 設定好啦，現在我們開始表演 1.單行溢位隱藏顯示 box text box1 目錄結構清晰是首要目標，至於命名只要能達到...
css字型溢位省略號處理 3種
如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。實現方法 span 效果如圖 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。接下來重點說一說多行文字溢位顯示省略號，...
CSS 文字溢位省略顯示
實現文字顯示單行或多行，超出部分用省略號顯示是乙個很常見的需求，在這裡做個分享記錄。文末有 demo 演示 下面是單行縮略的實現 overflow hidden text overflow ellipsis white space nowrap 注 要在塊級元素設定 單行縮略很簡單，唯一比較生疏的是...