Limitar la longitud de un texto a un determinado número de líneas

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$$(".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í:

1
2
3
4
5
<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

3 comentarios

  1. Dayana
    25 enero, 2016 a las 1:48 | Permalink

    Lo intenté utilizar pero no funciona.

  2. Patto Huyema
    19 junio, 2017 a las 14:59 | Permalink

    Hola! No me funciona, pregunto: el rel iría así? rel=”maxLines[3]”

  3. admin
    19 junio, 2017 a las 15:12 | Permalink

    Patto.. sí, el texto de la propiedad rel en verdad da igual…

    No he revisado si sigue funcionando, hace 8 años ya de esto :_(

Deja tu comentario

Tu correo nunca será compartido. Los campos marcados con * son obligatorios

*
*