實現(xiàn)單行文本溢出顯示 ...
image.png
overflow: hidden;
text-overflow:ellipsis; //clip裁剪疤孕，ellipsis省略號
white-space: nowrap; //不換行
當(dāng)然還需要加寬度width屬來兼容部分瀏覽簇搅。
實現(xiàn)多行文本溢出顯示
image.png
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
適用范圍：
因使用了WebKit的CSS擴展屬性完域，該方法適用于WebKit瀏覽器及移動端；
注：
1瘩将、-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)吟税。 為了實現(xiàn)該效果，它需要組合其他的WebKit屬性姿现。常見結(jié)合屬性：
2肠仪、display: -webkit-box; 必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示 备典。
3异旧、-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 提佣。
如果你覺著這樣還不夠美觀吮蛹， 那么就接著往下看：
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后面加一個有透明度“...”
弊端 那就是 【未超出行的情況下也會出現(xiàn)省略號】 只能結(jié)合JS 進行優(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枫笛。
