CSS實現單行、多行文本溢出顯示省略號…

單行文省略號...

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

實現方法：

width:300px;

height:30px;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

效果如圖：

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

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

實現方法：

-webkit-line-clamp: 3;

display: -webkit-box;

-webkit-box-orient: vertical;

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（如：<span>…<span/>）；兼容 ie8 需要將 ::after 替換成 :after。

　　更多云南龍頭科技有限公司網站案例請查看：http://www.www.charti.com.cn/case.asp?id=3

　　云南龍頭科技有限公司憑借多年的網站建設經驗，堅持以“幫助中小企業實現網絡營銷化”為宗旨，成功幫助多家中小企業實現互聯網信息化建設，得到了客戶的一致好評。如你有任何關于網站建設的疑問，請立即點擊咨詢云南龍頭科技有限公司資深營銷專家或撥打咨詢熱線：13759574266，我們會詳細為你一一解答你心中的疑難。