En ocasiones, nos podemos encontrar que un determinado diseño nos obliga a limitar el número de líneas que puede tener un texto. Esto es imposible de realizar del lado del servidor, con lo que hemos hecho un pequeño javascript que recorta el texto del elemento deseado en las líneas que queramos. El javascript es el siguiente:
$$(".maxlines").each(function(element) {
var numLines = element.getProperty("rel").substring(element.getProperty("rel").indexOf('[')+1,element.getProperty("rel").indexOf(']'));
var htmlCode = $(element).get('html');
// determinamos altura una linea
$(element).set('html', '-');
var oneLineHeight = element.getStyle('height').toInt();
element.set('html', htmlCode);
// Si tenemos más lineas que las permitidas
if (element.getStyle('height').toInt() / oneLineHeight > numLines) {
point1 = 0;
point2 = Math.round(htmlCode.length/2);
point3 = htmlCode.length;
var i = 0;
// Recortamos texto hasta que coja
do{
var newHtml = htmlCode.substring(0, point2) + '...';
element.set('html', newHtml);
if((element.getStyle('height').toInt())/oneLineHeight > numLines){
point3 = point2;
}else{
point1 = point2;
}
point2 = Math.round((point3-point1)/2)+point1;
}while ((point3-point1)>1);
if((element.getStyle('height').toInt())/oneLineHeight > numLines){
element.set('html', htmlCode.substring(0, point3-1) + '...');
}
}
});y en el html lo debemos usar así:
<div class="maxlines" rel="maxlines[3]">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.</div>la capa del texto debe incluir el class=”maxlines” y la propiedad rel=”maxLines[]” donde la cifra entre corchetes es el número de líneas que se tienen que mostrar.
El funcionamiento básico del script es el siguiente:
- Coloca en la capa un sólo carácter.
- Calcula la altura de esta capa.
- Usando el algoritmo de divide y vencerás vamos reduciendo a mitades la cadena para encontrar rápidamente por donde partir el texto.
y listos… se acaba de maquetar añadiendo puntos suspensivos y listos.
Todo esto funciona conjuntamente con la versión 1.2.2 de Mootools
