jquery - 段落内のテキストを切り捨てます

Question

2つの段落と「もっと読む」リンクでdivを作成しました（高さとオーバーフローが設定されています）。 2番目の段落は非表示です。

<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> 

「詳細を読む」をクリックすると、このスクリプトを使用して2番目の段落が表示されます。

$('.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() 
})