【css樣式】單行、多行文本溢出顯示省略號

    文本溢出顯示省略號這個樣式，我真的是逢寫必忘，也是服了，簡單整理一下：

• 單行文本

    單行文本相對簡單，三行代碼就能搞定，喏：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

    當然，這裏有一個前提是要設置寬度width，敲重點！

    最後的效果圖如下：

    

• 多行文本

    方法一：

    多行文本就稍微要複雜一點了，如果瀏覽器是webkit內核及移動端，實現方法如下：

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

    效果圖如下： 

    

    -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它需要組合其他的webkit屬性。

以下兩個屬性是必須的:

1. display: -webkit-box（將對象作爲彈性伸縮盒子模型顯示 ）
2. -webkit-box-orient（設置或檢索伸縮盒對象的子元素的排列方式 ）

     那如果不是webkit內核的又應該怎麼實現省略呢？

    方法二：

    下面的這個方法是通過僞元素實現的，具體代碼如下：

div {
    width: 400px;
    border: 1px solid #ccc;
    position: relative;
    line-height: 20px;
    max-height: 60px;
    overflow: hidden;
}

div::after {
   content: "..."; 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   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的控制來做優化，實現代碼如下：

div {
    width: 400px;
    border: 1px solid #ccc;
    position: relative;
    line-height: 20px;
    overflow: hidden;
}

ellipsis::after {
   content: "..."; 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   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代碼
$(function(){
    $('div').each(function(i, obj){
            // 獲取div的行高
            var lineHeight = parseInt($(this).css("line-height"));
            // 獲取div的高
            var height = parseInt($(this).height());
            // 超過3行添加ellipsis樣式
            if((height / lineHeight) >3 ){
                $(this).addClass("ellipsis")
                $(this).css("height","60px");
            }else{
                $(this).removeClass("ellipsis");
            }
        });
    })

     這裏有幾個點需要注意：

1. 將height設置爲line-height的整數倍是爲了避免超出的文字不顯示；
2. 將背景色設爲漸變是爲了避免文字顯示不全；
3. 針對IE瀏覽器：IE6-7不支持content內容，需要添加標籤兼容；IE8需將::after換爲:after。

    方法三：

    當然，我覺得最靠譜的還是自己寫，這個還是得看具體需求，下面的方法是通過字符串的長度來控制是不是顯示省略號的，具體實現如下：

// js代碼
$(function() {
    let arr = []; 
    $('.wrapper').each(function() {
          let content = $.trim($(this).text()); 
          arr.push(content); 
    })

    for (var i = 0; i < arr.length; i++) { 
      // 這裏也可以通過正則匹配區分數字、字母及文字佔用的不同字節
       if (arr[i].length >= 48) { 
            content = arr[i].substr(0, 48) + '...';
            $(".wrapper").eq(i).text(content);
       } else {
            content = arr[i];
            $(".wrapper").eq(i).text(content);
       }
    }        
})  

    實現效果如下：

     

    方法四：

    除了css樣式和js控制之外，我們也可以用一些插件來實現文本溢出顯示省略號，例如dotdotdot。

    當然，我也沒有用過，這裏就不再贅述了，給個鏈接：https://dotdotdot.frebsite.nl/