jquery - Text im Absatz

Question

abschneiden

Also habe ich div erstellt (es hat Höhe und Überlauf eingestellt) mit zwei Absätzen und "mehr lesen" -Link. Der zweite Absatz ist ausgeblendet.

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

Mit diesem Skript, wenn ich auf "Lesen Sie mehr" klicken, zeigt es den zweiten Absatz.

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

Was ich jetzt tun muß, ist, den Text in Absatz zu 50 Zeichen zu kürzen und den Rest ersetzen mit: „... mehr lesen“. Wenn Sie erneut auf "Mehr lesen" klicken, sollte der gesamte Text aus beiden Absätzen angezeigt werden. Wie würde ich das tun?

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