實(shí)現(xiàn)單行文本溢出顯示 ...

image.png

overflow: hidden; 
text-overflow:ellipsis;  //clip裁剪，ellipsis省略號(hào)
white-space: nowrap; //不換行

當(dāng)然還需要加寬度width屬來(lái)兼容部分瀏覽。

實(shí)現(xiàn)多行文本溢出顯示

image.png

display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;
text-overflow: ellipsis;

適用范圍：
因使用了WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端；

注：
1、-webkit-line-clamp用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見(jiàn)結(jié)合屬性：
2、display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。
3、-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。

如果你覺(jué)著這樣還不夠美觀， 那么就接著往下看：

image.png

div { 
    position: relative; 
    line-height: 20px; 
    max-height: 40px; 
    overflow: hidden; 
} 
div: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%);
} 

限制寬高，再在div后面加一個(gè)有透明度“...”
弊端 那就是 【未超出行的情況下也會(huì)出現(xiàn)省略號(hào)】 只能結(jié)合JS 進(jìn)行優(yōu)化該方法了。

注：
1、將height設(shè)置為line-height的整數(shù)倍，防止超出的文字露出。
2、給p::after添加漸變背景可避免文字只顯示一半。
3、由于ie6-7不顯示content內(nèi)容，所以要添加標(biāo)簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。