溢出隐藏后缀(...查看详情)

• 用CSS样式写点点点
  1. 单行溢出点点点

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

  2. 多行溢出点点点

     display: -webkit-box;
     -webkit-line-clamp: 4;  //4行溢出点点点
     -webkit-box-orient: vertical;
     overflow: hidden;

 

有时候我们的产品需要的不仅仅是单行溢出点点点或者多行溢出点点点这样的。特别是像做咨询项目的，很多咨询列表页是需要超出多行后点点点并且加上'查看详细'四个字的，或者超出多少个字符后点点点在加上'查看详情'四个字。

 

• 超出多少个字符点点点且后缀'查看详情'

DOM结构：
<div class="test">ps: 在Firefox下上面div文是“这段发货单上垃圾分类电视剧法律的设计费范德萨代码调用了同文件夹路径的ellipsis.字溢出f的撒范德萨省略号表示fdsafdj放假了电丰富的老数据量的快速减肥了肯定是视剧发了看电视就付款。</div>

样式CSS和JS：
.test{
    display: block;
    width: 100%;
    line-height: 20px;
    font-size: 16px;

}
a{
    text-decoration:none;
    color: #00AAEE;
}
if($('.test').text().length>70){
　　var content = $('.test').html().substr(0,70);  //截取70个字符
　　$('.test').html(content);
　　$('.test').append('<a href="http://www.baidu.com">...查看详情</a>');
}

• 超出多少行点点点且后缀'查看详情'

DOM结构：
<div class="test"><span class="text">ps: 在Firefox下上面div文是“这段发货单上垃圾分类电视剧法律的设计费范德萨代码调用了同文件夹路径的ellipsis.字溢出f的撒范德萨省略号表示fdsafdj放假了电丰富的老数据量的快速减肥了肯定是视剧发了看电视就付款。</span></div>

样式CSS和JS：
.test{
    width: 100%;
    max-height: 80px;
    overflow: hidden;
}
.text{
    display: block;
    width: 100%;
    line-height: 20px;
    font-size: 16px;

}
a{
    text-decoration:none;
    color: #00AAEE;
}

    //当内容超出4行是进行截取直到内容控制在4行内
    if($('.text').height()>80){
        while ($('.text').height()>80){
            var content = $('.text').html().substr(0,$('.text').html().length-7);
            $('.text').html(content);
        }
        $('.text').append('<a href="http://www.baidu.com">...查看详情</a>');
    }
    //再次判断截取后的内容加上'...查看详情'后的最终内容是否超出4行,超出就再次截取
    if($('.text').height()>80){
        content = $('.text').text().substr(0,$('.text').text().length-14);
        $('.text').html(content);
        $('.text').append('<a href="http://www.baidu.com">...查看详情</a>')
    }