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() 
})