文本溢出顯示省略號

1、單行文本溢出

width: 300px;/*前提要設置寬度*/
overflow: hidden;/*超出隱藏*/
text-overflow: ellipsis;/*省略號*/
white-space: nowrap;/*不換行*/

2、多行文本溢出

方法一：利用定位實現。該方法適用範圍廣，但文字未超出行的狀況下也會出現省略號,可結合js優化該方法。

p {
    width: 300px;/*可選*/
    position: relative;
    line-height: 20px;
    height: 60px;/*顯示3行*/
    overflow: hidden;
    padding: 2px 10px;
}
p::after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
}

須要注意的幾點：

• 利用height和line-height的倍數關係調整須要顯示的行數，防止超出的文字露出。
• 給p::after添加漸變背景可避免文字只顯示一半。
• IE6-7不顯示content內容，因此要兼容IE6-7能夠是在內容中加入一個標籤，好比用<span class="line-clamp">...</span>去模擬；
• 要支持IE8，須要將::after替換成:after。

方法二：利用WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端。

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

須要注意：

• display: -webkit-box; 將對象做爲彈性伸縮盒子模型顯示。
• -webkit-line-clamp; 用來限制在一個塊元素顯示的文本的行數。
• -webkit-box-orient; 設置或檢索伸縮盒對象的子元素的排列方式。

方法三：使用JavaScript。

$(".class").each(function(){
  //設置顯示獲取字符串的字數
  var maxwidth=280;   
  if($(this).text().length>maxwidth){
     //截取字符串
     $(this).text($(this).text().substring(0,maxwidth));
     //多餘的用省略號顯示
     $(this).html($(this).html()+"...");
   }
});

參考文章連接:http://caibaojian.com/multili...