css文本超出隱藏顯示省略號

denson 發布于2019-04-23 11:58 / 1283人閱讀

摘要：如果實現單行文本的溢出顯示省略號同學們應該都知道用屬性來，當然還需要加寬度屬來兼容部分瀏覽。接下來重點說一說多行文本溢出顯示省略號，如下。給添加漸變背景可避免文字只顯示一半。

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{position:?relative;?line-height:?20px;?max-height:?40px;overflow:?hidden;}
p::after{content:?"...";?position:?absolute;?bottom:?0;?right:?0;?padding-left:?40px;
background:?-webkit-linear-gradient(left,?transparent,?#fff?55%);
background:?-o-linear-gradient(right,?transparent,?#fff?55%);
background:?-moz-linear-gradient(right,?transparent,?#fff?55%);
background:?linear-gradient(to?right,?transparent,?#fff?55%);
}

效果如圖：

適用范圍：
該方法適用范圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

注：

將height設置為line-height的整數倍，防止超出的文字露出。
給p::after添加漸變背景可避免文字只顯示一半。
由于ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：…）；兼容ie8需要將::after替換成:after。

感謝分享：http://www.daqianduan.com/6179.html

云服務器 GPU云服務器隱藏超出文本省略號css html布局超出后隱藏 css省略

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1416.html

css實現文本溢出隱藏

摘要：實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。 css實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。基礎設置在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設置 /*基礎設置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 評論0 收藏0