2017-11-07【当文字过长时，用点点点（...）显示】

方法1：css本身有一个文字溢出属性：text-overflow:ellipsis;，当溢出后显示点点点（...）

caniuse_text-overflow.png

去了can i use测了一下text-overflow属性的兼容性，基本上现在主流浏览器都支持。以前Fire Fox不支持，需要额外引入一个xml文件，现在不需要了。

<style>
body{
    font-size: 12px;
}
.text_overflow_ellipsis{
    width:400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>

<div class="text_overflow_ellipsis" style="margin: 20px auto; background-color: #cccccc">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>

1.png

方法2：参照张鑫旭的margin负值定位法

<style>
body{
    font-size: 12px;
}
.zxx_text_overflow {
    width:24em;
    height:1.3em;
    overflow:hidden;
    zoom:1;
}
.zxx_text_overflow .zxx_text{
    float:left;
    height:1.3em;
    margin-right:3em;
    overflow:hidden;
}
.zxx_text_overflow .zxx_dotted{
    width:3em;
    height:1.3em;
    float:right;
    margin-top:-1.3em;
}
</style>

<div class="zxx_text_overflow" style="margin: 20px auto; background-color: #cccccc;">
    <div class="zxx_text" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
    <div class="zxx_dotted" >…</div>
</div>

2.png

感觉东西还挺多，要是项目中用的多还挺麻烦，可以当成一种思路扩展。

以上方法都不能指定文字的字符数，只能以包裹文字的元素宽度去截取。使用jq就可以实现，并且可以很好的复用，使用时调用函数就可以了。当项目中有许多地方需要用到时，可以使用jq的方法。

方法3：写函数实现该功能，截取特定长度的字符。【同样参照张鑫旭，可看大神博客】

body{
    font-size: 12px;
}

<div class="zxx_text_overflow" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>

$(document).ready(function(){
    //限制字符个数
    $(".zxx_text_overflow").each(function(){
        var maxwidth = 23;
        if($(this).text().length > maxwidth){
            $(this).text($(this).text().substring(0, maxwidth));
            $(this).html($(this).html()+'…');
        }
    });
});

注意：需要引入jQuery。

1.png

可以看出：是截取了特定长度（23）的字符，而与包裹文字的元素宽度无关。

那么反过来呢？

   var wordLimit=function(){
       $(".zxx_text_overflow").each(function(){
           var copyThis = $(this.cloneNode(true)).hide().css({
               'position': 'absolute',
               'width': 'auto',
               'overflow': 'visible'
           });
       $(this).after(copyThis);
           if(copyThis.width() > $(this).width()){
               $(this).text($(this).text().substring(0,$(this).html().length-4));
               $(this).html($(this).html()+'…');
               copyThis.remove();//清除复制
               wordLimit();
           }else{
               copyThis.remove(); //清除复制
               return;
           }
       });
   };
   wordLimit();

注意：元素一定要设置固定宽度（我设的400px），超出该宽度后就会显示点点点（...）

1.png

那么将以上两种方式结合起来写一个jQuery插件来实现：截取特定字符和超过宽度显示点点点（...）

<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>

<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
    当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>


   (function($){
       $.fn.wordLimit = function(num){
           this.each(function(){
               if(!num){
                   var copyThis = $(this.cloneNode(true)).hide().css({
                       'position': 'absolute',
                       'width': 'auto',
                       'overflow': 'visible'
                   });
                   $(this).after(copyThis);
                   if(copyThis.width() > $(this).width()){
                       $(this).text($(this).text().substring(0,$(this).text().length-4));
                       $(this).html($(this).html()+'...');
                       copyThis.remove();
                       $(this).wordLimit();
                   }else{
                       copyThis.remove();
                       return;
                   }
               }else{
                   var maxwidth=num;
                   if($(this).text().length > maxwidth){
                       $(this).text($(this).text().substring(0, maxwidth));
                       $(this).html($(this).html()+'...');
                   }
               }
           });
       };
       //调用方式：
       $('.zxx_text_overflow1').wordLimit();
       $('.zxx_text_overflow2').wordLimit(23);
   })(jQuery);

注意：不传参数调用时，元素一定要设置宽度。

如何实现：多行文本超出，在最后一行显示点点点（...）

.box{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

1.png

IE不支持-webkit-box

1.png

-webkit-line-clamp支持性较差
-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点（...），如果是2则最多2行，第2行结束显示点点点（...）。

1.png

-webkit-box-orient我竟然没有查到支持性，可能很差。