css文字超出隱藏顯示省略號
p style=「width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;」>
如果實現單行文字的溢位顯示省略號同學們應該都知道用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 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
實現方法：
p
p::after
適用範圍：
該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注：將height設定為line-height的整數倍，防止超出的文字露出。
給p::after新增漸變背景可避免文字只顯示一半。
由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
感謝分享：
css 文字超出隱藏並且顯示省略號
單行 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 多行需要加如下屬性 display webkit box 將物件作為彈性伸縮盒子模型顯示。webkit box orient ver...
CSS文字超出顯示省略號
white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距，為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話，會發現省略號消失了，但不新增font size 0 又...
文字超出隱藏並顯示省略號
文字超出了需要隱藏並顯示省略號這個在工作中很多時候都要用到，我想很多人都碰到過吧，這個有兩種解決方法 一是用程式開擷取字元長度，這個其實也是可以的 第二種是用樣式來做,這裡主要介紹一下用樣式怎麼來做吧，我話也不多說了吧直接上 吧，css樣式如下 css1 css2 html 如下 divclass ...