¿Hay alguna manera de obtener, digamos, la quinta línea (el desplazamiento de su primera letra) del contenido de un bloque usando jQuery?

Me refiero a la línea visual, la línea calculada del navegador y no la línea en el código fuente.

3
SBouazza 15 ago. 2009 a las 21:25

3 respuestas

La mejor respuesta

JQuery.fn.line:

jQuery.fn.line = function(line) {

    var dummy = this.clone().css({
            top: -9999,
            left: -9999,
            position: 'absolute',
            width: this.width()
        }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lineNumber = 0,
        ret = '',
        found = false;

    for (var i = 0; i < words; ++i) {

        dummy.html(
            text.slice(0,i).join('') +
            text[i].replace(/(\S)/, '$1<span/>') +
            text.slice(i+1).join('')
        );

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset) {
            lineNumber += 1;
        }

        lastTopOffset = topOffset;

        if (lineNumber === line) {

            found = true;
            ret += text[i];

        } else {

            if (found) {
                break;
            }

        }

    }

    dummy.remove();
    return ret;

};

Uso:

$('#someParagraph').line(3); // blah blah blah

Ejemplo: http://jsbin.com/akave

Cómo funciona:

Atraviesa todo el elemento (en realidad, un clon del elemento) insertando un elemento <span/> dentro de cada palabra. El desplazamiento superior del tramo se almacena en caché; cuando este desplazamiento cambia, podemos asumir que estamos en una nueva línea.

5
James 15 ago. 2009 a las 19:59

Bueno, hay una manera de estimarlo, y no es bonito, pero lo he usado antes.

El algoritmo básicamente es así:

  1. Cree un nodo de "prueba", absolutamente ubicado dentro del bloque que desea medir.
  2. Ponga algo de texto en ese nodo de prueba.
  3. Obtenga la altura de ese nodo de prueba. (Lo llamaremos H.) Esta es su altura estimada para una línea.
  4. Ahora cree un bloque duplicado, sin texto.
  5. Itere a través de un ciclo que: a) Tome el contenido del bloque y agregue una palabra a la vez al nuevo bloque duplicado. b) Verifique la altura del bloque. Si la altura cae entre 4H y 6H, entonces estás dentro del rango de la 5ta línea. Agregue ese texto a una variable de búfer.
  6. Su variable de búfer contendrá el texto que se muestra en la quinta línea.

No es bonito, pero funciona si duplica los elementos correctamente.

1
Matt Howell 15 ago. 2009 a las 17:32

Puede usar javascript .split () y delimitado por "
".

tutorial dividido

-4
helloandre 15 ago. 2009 a las 17:28