截取段落前100个字符并隐藏段落的其余内容显示/隐藏其他链接的链接

Question

我有500多个字符的段落。我只想得到最初的100个字符并隐藏其余部分。另外我想在100个字符旁边插入“更多”链接。点击更多链接整个段落应显示和编辑文本“更多”到“更少”，并点击“更少”它应该切换行为。段落是动态生成的，我无法用.wrap（）包装它的内容。这里是我拥有的和我想要的例子。

这是我有：

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text.</p> 

这就是我想要什么，当DOM加载

<p>It is a long established fact that a reader will be distracted by ..More</p> 

这就是我想要的东西，当用户点击 “更多”

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text. ..Less</p> 

当我们点击“较少”时，它应该恢复点击“更多”所做的事情。

我正在使用jQuery来分割，切片并将子字符串换成跨度，我想要隐藏但是不起作用。

var title = $("p").text(); 
var shortText = jQuery.trim(title).substring(100, 1000).split(" ") 
    .slice(0, -1).join(" ") + "...More >>"; 
shortText.wrap('</span>'); 

Answer 1

小提琴：http://jsfiddle.net/iambriansreed/bjdSF/

的jQuery：

jQuery(function(){ 

    var minimized_elements = $('p.minimize'); 
    var minimize_character_count = 100;  

    minimized_elements.each(function(){  
     var t = $(this).text();   
     if(t.length < minimize_character_count) return; 

     $(this).html(
      t.slice(0,minimize_character_count)+'<span>... </span><a href="#" class="more">More</a>'+ 
      '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>' 
     ); 

    }); 

    $('a.more', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).hide().prev().hide(); 
     $(this).next().show();   
    }); 

    $('a.less', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).parent().hide().prev().show().prev().show();  
    }); 

});​ 

Answer 2

你看过jQuery Truncator插件吗？

它几乎完全符合您所描述的内容。

Answer 3

这不是最好的谷歌结果，但我使用jQuery Expander plugin取得巨大成功。这很好，因为它不会隐藏任何搜索引擎机器人。

Answer 4

它看起来像其他几个人打我，但这里是我想出了。

var MORE = "... More...", 
    LESS = " Less..."; 

$(function(){ 
    $("p").each(function(){ 
     var $ths = $(this), 
      txt = $ths.text(); 

     //Clear the text 
     $ths.text(""); 

     //First 100 chars 
     $ths.append($("<span>").text(txt.substr(0,100))); 

     //The rest 
     $ths.append($("<span>").text(txt.substr(100, txt.length)).hide()); 

     //More link 
     $ths.append(
      $("<a>").text(MORE).click(function(){ 
       var $ths = $(this); 

       if($ths.text() == MORE){ 
        $ths.prev().show(); 
        $ths.text(LESS); 
       } 
       else{ 
        $ths.prev().hide(); 
        $ths.text(MORE); 
       } 
      }) 
     ); 
    }); 
}); 

Answer 5

感谢@iambriansreed他不错的功能，这里有一个轻微的修改就行截段breakes：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
jQuery(function(){ 

var minimized_elements = $('p.minimize'); 
var maxLines = 20; 

minimized_elements.each(function(){  
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9 
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/); 
    var countLines = textArr.length; 

    if (countLines > maxLines) { 
     text_less = textArr.slice(0, maxLines).join("<br>"); 
     text_more = textArr.slice(maxLines, countLines).join("<br>"); 
    } 
    else return; 

    $(this).html(
     text_less + '<span>... </span><a href="#" class="more">More</a>'+ 
     '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>' 
    ); 
}); 

$('a.more', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).hide().prev().hide(); 
    $(this).next().show();   
}); 

$('a.less', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).parent().hide().prev().show().prev().show();  
}); 

}); 

</script> 

Answer 6

大家谁到这里来寻找节目更多... 这里是另一个插件http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/