CSS實現(xiàn)單行、多行文本溢出顯示省略號…

單行文省略號...

　　如果要實現(xiàn)單行文本的溢出顯示省略號，大家應(yīng)該都知道用 text-overflow:ellipsis 屬性來，當然還需要加寬度 width 屬來兼容部分瀏覽器。

實現(xiàn)方法：

width:300px;

height:30px;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

效果如圖：

但是這個屬性只支持單行文本的溢出顯示省略號，如果我們要實現(xiàn)多行文本溢出顯示省略號要怎么做呢？

第一種 多行文本省略號...

實現(xiàn)方法：

-webkit-line-clamp: 3;

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

效果如圖：

適用范圍：

因使用了 WebKit 的 CSS 擴展屬性，該方法適用于 WebKit 瀏覽器及移動端；

注：

-webkit-line-clamp：用來限制在一個塊元素顯示的文本行數(shù)。 為了實現(xiàn)該效果，它需要組合其他的 WebKit 屬性。常見結(jié)合屬性：

display: -webkit-box：必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。

-webkit-box-orient：必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。

第二種 多行文本省略號...

實現(xiàn)方法：

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%);

}

效果如圖：

適用范圍：

該方法適用范圍廣，但文字未超出行的情況下也會出現(xiàn)省略號,可結(jié)合 js 優(yōu)化該方法。

注：

將height設(shè)置為 line-height 的整數(shù)倍，防止超出的文字露出。

給 p::after 添加漸變背景可避免文字只顯示一半。

由于 ie6-7 不顯示 content 內(nèi)容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容 ie8 需要將 ::after 替換成 :after。

點擊查看演示