Muchas veces, nos piden que en una vista de datos sólo aparezcan los 250 primero caracteres o un número que nos determinen de caracteres de un campo de varias líneas de texto.
El problema reside en que ese tratamiento sobre un campo de varias lineas de texto, no podemos hacerlo en XSL, en concreto cuando el campo de varias lineas de texto, permite texto enriquecido.
Ya que internamente, lo que se guarda es código HTML. Y al quedarnos sólo con un número determinado de caracteres conseguiremos situaciones, como quedarnos con código HTML en el que se abren etiquetas pero falta el cierre. Pudiendo darse cosas "curiosas" en lo que veríamos en nuestro navegador.
Para ello el truco más recurrido, es tratar el texto desde el lado cliente con JavaScript. Para ello podremos aplicar el siguiente código:
/*Justo tras acabar de cargarse el código de nuestra página (ready), se ejecutará nuestro código*/
$(document).ready(function(){
/*Buscamos todos los elementos HTML que hemos asociado a la clase descripcion, para ser analizados y ver si hay que recortarlos*/
$('.descripcion').each(function(){
/*Variable en la cual indicaremos el número máximo de caracteres a mostrar*/
var longitud=300;
/*Vemos si para cada uno de estos elementos, superan la longitud máxima o no*/
if($(this).text().length > longitud){
/*En el caso de que se supere, nos quedaremos con los 300 primeros caracteres*/
var texto=$(this).text().substring(0,longitud);
/*Para evitar palabras incompletas, buscaremos el último espacio en blanco*/
var indiceUltimoEspacio= texto.lastIndexOf(' ');
/*Nos quedaremos con el texto que hay antes del último espacio en blanco y pondremos puntos suspensivos*/
texto=texto.substring(0,indiceUltimoEspacio) +'<span class="puntos">...</span>';
/*Lo encapsulamos todo dentro de un div con la misma clase, para mantener los estilos*/
var primeraParte = '<div class="descripcion">' + texto + '</div>';
/*Y los pintamos en la posición donde estaba el texto largo*/
$(this).html(primeraParte);
};
});
});
Si lo que quisiéramos hubiera sido darle la posibilidad de que al hacer clic en los puntos suspensivos se mostrará todo el texto, la función sería:
/*Justo tras acabar de cargarse el código de nuestra página (ready), se ejecutará nuestro código*/
$(document).ready(function(){
/*Buscamos todos los elementos HTML que hemos asociado a la clase description, para ser analizados y ver si hay que recortarlos*/
$('.description').each(function(){
/*Variable en la cual indicaremos el número máximo de caracteres a mostrar*/
var longitud=300;
/*Vemos si para cada uno de estos elementos, superan la longitud máxima o no*/
if($(this).text().length > longitud){
/*En el caso de que se supere, nos quedaremos con los 300 primeros caracteres*/
var texto=$(this).text().substring(0,longitud);
/*Para evitar palabras incompletas, buscaremos el último espacio en blanco*/
var indiceUltimoEspacio= texto.lastIndexOf(' ');
/*Nos quedaremos con el texto que hay antes del último espacio en blanco y pondremos puntos suspensivos*/
texto=texto.substring(0,indiceUltimoEspacio) +'<span class="puntos">...</span>';
/*Lo encapsulamos todo dentro de un div con la misma clase, para mantener los estilos*/
var primeraParte = '<div class="description">' + texto + '</div>';
var segundaParte = '<span class="texto-oculto" style="display:none;">' + $(this).text().substring(indiceUltimoEspacio,$(this).text().length - 1) + '</span>';
/*Y los pintamos en la posición donde estaba el texto largo*/
$(this).html(primeraParte + segundaParte);
/*Ponemos una zona */
$(this).after('<span class="Mas_info">Ver más</span>');
};
});
/*Cuando hagamos clic en Mas_info se lanzará esta parte*/
$('.Mas_info').click(function(){
/*Comprobamos si el texto-oculto esta oculto*/
if($(this).prev().find('.texto-oculto').css('display') == 'none'){
/*En ese caso mostramos el texto oculto*/
$(this).prev().find('.texto-oculto').css('display','inline');
/*Ocultamos los puntos suspensivos*/
$(this).prev().find('.puntos').css('display','none');
/*Y cambiamos el texto por Ver menos*/
$(this).text('Ver menos');
}
/*justo lo contarios*/
else{
$(this).prev().find('.texto-oculto').css('display','none');
$(this).prev().find('.puntos').css('display','inline');
$(this).html('Ver más');
};
});
});
Hay que tener en cuenta, que antes de poner todo este código debe haber una referencia a Jquery, ya sea externa:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
O interna.
