jquery - 截断段落中的文本

Question

所以我创建了包含两个段落和“阅读更多”链接的 div（它已设置高度和溢出）。第二段被隐藏了。

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam iusto, voluptatum dolorem maiores ratione accusamus modi, sit. Velit nobis quod praesentium quaerat. Sunt mollitia odit asperiores numquam, debitis facere. Nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam iusto, voluptatum dolorem maiores ratione accusamus modi, sit. Velit nobis quod praesentium quaerat. Sunt mollitia odit asperiores numquam, debitis facere. Nulla.</p>
</div>
<div><a class="more" href="#">read more</a></div>

当我点击“阅读更多”时使用这个脚本，它会显示第二段。

$('.more').click(function(e) {
    e.stopPropagation();
    $('.text').css({
       'height': 'auto'
    });
    $('.more').hide();
});

我现在需要做的是将第一段中的文本截断为 50 个字符，并将其余部分替换为：“...阅读更多”。同样，当您单击“阅读更多”时，它应该会显示两个段落中的所有文本。我该怎么做？

Answer 1

    var firstPara = $('.text p:first').text(); /* Get text in first paragraph */

    $('.text p:first').html(firstPara.substring(0,50)+' <a class="more" href="#">read more</a>');  /* Replace first paragraph text with first 50 characters  */

    $('.text p:last').append(firstPara.substring(50));  /* Append remaining text to Second paragraph   */

$('body').on('click','a.more',function(){
/*enable second para on more click*/
   $('.text p:last').show()
})