【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/