溢出隱藏後綴(...查看詳情)

• 用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>')
    }