Truncar el primer párrafo de 100 caracteres y ocultar el contenido del resto del párrafo para mostrar/ocultar el resto del conflicto con el enlace más/menos

Question

Tengo un párrafo que tiene más de 500 caracteres. Quiero obtener solo 100 caracteres iniciales y ocultar el resto. También quiero insertar el enlace "Más" al lado de 100 caracteres. Al hacer clic en más enlace, todo el párrafo debe mostrar y editar el texto "Más" a "Menos" y al hacer clic en "Menos", debe alternar el comportamiento. El párrafo se genera dinámicamente. No puedo ajustar el contenido del mismo con .wrap(). Aquí hay un ejemplo de lo que tengo y lo que quiero.

Esto es lo que tengo:

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

Esto es lo que quiero cuando cargas DOM

<p>It is a long established fact that a reader will be distracted by ..More</p> 

Esto es lo que yo quiero cuando el usuario haga clic en "Más"

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

Cuando hacemos clic en "Menos", debe revertir lo que al hacer clic en "Más" ha hecho.

Estoy usando jQuery para dividir, cortar y envolver subcadenas en span que quiero ocultar pero eso no funciona.

var title = $("p").text(); 
var shortText = jQuery.trim(title).substring(100, 1000).split(" ") 
    .slice(0, -1).join(" ") + "...More >>"; 
shortText.wrap('</span>'); 

Answer 1

violín: 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();  
    }); 

});​ 

Answer 2

¿Has visto el plugin jQuery Truncator?

Hace más o menos exactamente lo que usted ha descrito.

Answer 3

No es un resultado superior de google, pero he utilizado el jQuery Expander plugin con gran éxito. Es bueno porque no oculta nada de los robots de los motores de búsqueda.

Answer 4

Se parece a un par de personas más se me adelantó, pero aquí es lo que ocurrió.

var MORE = "... More...", 
    LESS = " Less..."; 

$(function(){ 
    $("p").each(function(){ 
     var $ths = $(this), 
      txt = $ths.text(); 

     //Clear the text 
     $ths.text(""); 

     //First 100 chars 
     $ths.append($("<span>").text(txt.substr(0,100))); 

     //The rest 
     $ths.append($("<span>").text(txt.substr(100, txt.length)).hide()); 

     //More link 
     $ths.append(
      $("<a>").text(MORE).click(function(){ 
       var $ths = $(this); 

       if($ths.text() == MORE){ 
        $ths.prev().show(); 
        $ths.text(LESS); 
       } 
       else{ 
        $ths.prev().hide(); 
        $ths.text(MORE); 
       } 
      }) 
     ); 
    }); 
}); 

Answer 5

Gracias a @iambriansreed por su buen funcionamiento, aquí hay una ligera modificación en el párrafo truncado en la línea Breakes:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
jQuery(function(){ 

var minimized_elements = $('p.minimize'); 
var maxLines = 20; 

minimized_elements.each(function(){  
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9 
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/); 
    var countLines = textArr.length; 

    if (countLines > maxLines) { 
     text_less = textArr.slice(0, maxLines).join("<br>"); 
     text_more = textArr.slice(maxLines, countLines).join("<br>"); 
    } 
    else return; 

    $(this).html(
     text_less + '<span>... </span><a href="#" class="more">More</a>'+ 
     '<span style="display:none;">'+ text_more +' <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();  
}); 

}); 

</script> 

Answer 6

para todos los que han venido aquí en busca de espectáculo más ... Aquí hay otro plug-in http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/