domingo, 24 de enero de 2010

Simular text-overflow:ellipsis en un párrafo con javascript

La propiedad text-overflow:ellipsis todavía no está implementada en todos los navegadores, así que si queremos obtener un resultado parecido en navegadores donde no está implementado (por ejemplo en Firefox) hay que buscar alguna alternativa.

Existe un "plugin" para jQuery que puedes ver haciendo click aquí.

Yo he hecho una simple implementación para prototype que puedes usar para cortar el texto y poner puntos suspensivos si la altura del texto es mayor a la altura del párrafo.

Esta es la función:
Element.addMethods({
    //Pone puntos suspensivos si el texto del elemento si su altura supera "maxHeight"
    ellipsis: function(element, maxHeight){
        element = $(element);
    
        var i=0;
        var words = element.innerHTML.split(' ');
        element.update('');
        
        while(i < words.length && parseInt(element.offsetHeight, 10) < maxHeight)
            element.update(element.innerHTML + (element.innerHTML == '' ? '' : ' ') + words[i++]);
            
        if (i < words.length)
            element.update(element.innerHTML.substring(0, element.innerHTML.lastIndexOf(' ')) + '...');
            
        return element;
    }
});
Puedes usarlo de esta forma tan sencilla:

Teniendo en el html:
Aquí va tu texto
Si quisieras que tu párrafo tuviese 100px de altura máxima, usarías la función así:
$('parrafo').ellipsis(100);

No hay comentarios:

Publicar un comentario