截断段落前 100 个字符并隐藏段落的其余内容，以通过更多/更少链接显示/隐藏其余内容

我有一个超过 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>');

Fiddle: http://jsfiddle.net/iambriansreed/bjdSF/ 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();    
    });

});​