El siguiente código Javascript nos permite hacer que aquellos textos que superen cierto número de carácteres se recorten añadiendo puntos suspensivos cuando llega al límite y ocultando el resto. Además añade un texto de "Ver mas" o "Ver menos" para poder ver u ocultar el texto que sobra.
Usaremos el siguiente código como ejemplo HTML:
<p class="texto-cortado">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Del código anterior sólo debemos tener en cuenta la class "texto-cortado" ya que será la class que buscara el script para recortar su texto.
Para implementar este script deb?is tener incluida la librer?a jQuery .
El código JS es el siguiente:
/***Limitar tamaño texto***/
jQuery(document).ready(function(){
$('.texto-cortado').each(function(){
var longitud=190;
if($(this).text().length > longitud){
var texto=$(this).text().substring(0,longitud);
var indiceUltimoEspacio= texto.lastIndexOf(' ');
texto=texto.substring(0,indiceUltimoEspacio) +'...';
var primeraParte = '' + texto + '';
var segundaParte = '' + $(this).text().substring(indiceUltimoEspacio,$(this).text().length - 1) + '';
$(this).html(primeraParte + segundaParte);
$(this).after('Ver más');
};
});
$('.boton_mas_info').live('click',function(){
if($(this).prev().find('.texto-ocultado').css('display') == 'none'){
$(this).prev().find('.texto-ocultado').css('display','inline');
$(this).prev().find('.puntos').css('display','none');
$(this).text('Ver menos');
}
else{
$(this).prev().find('.texto-ocultado').css('display','none');
$(this).prev().find('.puntos').css('display','inline');
$(this).html('Ver más');
};
});
});
En el código anterior hemos limitado el tamaño del texto a 190. Todo texto que s encuentre dentro de un elemento con class "texto-cortado" que supere ese tamaño será recortado a 190 caracteres. El class debemos aplicarlo directametne sobre el bloque que contiene al texto, por ejemplo su <p>. Si lo aplicamos a un bloque general no lo hará correctamente.
Además, la segunda función posibilita el mostrar u ocultar el texto que sobró dándole funcionalidad al botón de "Ver más" o "Ver menos".