javascript - Truncar el texto con jQuery basado en el ancho de píxel

Question

Estoy intentando usar jquery para escribir una función rápida que calcula el ancho de píxel de una cadena en una página html, luego trunca la cadena hasta que alcanza el ancho de píxel ideal ...

Sin embargo, no funciona (el texto no se trunca) ...

Aquí está el código que tengo:

    function constrain(text, original, ideal_width){

    var temp_item = (''<span class="temp_item" style="display:none;">''+ text +''</span>'');
    $(temp_item).appendTo(''body'');
    var item_width = $(''span.temp_item'').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text-1));
        $(''.temp_item'').html(text);
        item_width = $(''span.temp_item'').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + ''&hellip;'');
    } else {
        return text;
    }
}

Así es como lo llamo desde la página:

    $(''.service_link span:odd'').each(function(){
    var item_text = $(this).text();
    var original_length = item_text.length;
    var constrained = constrain(item_text, original_length,175);
    $(this).html(constrained);
});

¿Alguna idea sobre lo que estoy haciendo mal? Si hay una manera de hacerlo más rápido (es decir, de tipo burbuja), también sería genial.

¡Gracias!

Answer 1

En esta línea:

smaller_text = smaller_text.substr(0, (smaller_text-1));

puede haber intentado

smaller_text = smaller_text.substr(0, (smaller_text.length-1));

¿Eso resuelve el problema?

Answer 2

En lugar de hackear esto junto con el script, ¿por qué no solo usar CSS para especificar el ancho del elemento en el que estás poniendo esta cadena? Puede utilizar text-overflow para indicar al navegador que debe truncarse con puntos suspensivos.

.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

text-overflow es una declaración CSS3, pero es compatible con IE 6+, WebKit 312.3+ (Safari 1.3 + / Chrome) y Opera 9+ (las versiones <10.7 necesitan la declaración -o-text-overflow ).

Tenga en cuenta que esto no se implementó en Firefox hasta la versión 7.0, y menos del 4% de los usuarios de Firefox todavía usan versiones antiguas (en su mayoría 3.6). Su texto aún se truncará en versiones anteriores, simplemente no se mostrarán puntos suspensivos. Si le preocupa este pequeño grupo de usuarios, puede usar este complemento jQuery , que no hace nada en IE / WebKit / Opera / Firefox ≥ 7, pero emulará text-overflow en Firefox ≤ 6.

Answer 3

Gracias, lo tengo funcionando, pero solo funciona en el primer elemento y se detiene. ¿Tiene esto que ver con la forma en que declaro las variables?

Aquí está el código actual:

    function constrain(text, original, ideal_width){

    var temp_item = (''<span class="temp_item" style="display:none;">''+ text +''</span>'');
    $(temp_item).appendTo(''body'');
    var item_width = $(''span.temp_item'').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        $(''.temp_item'').html(smaller_text);
        item_width = $(''span.temp_item'').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + ''&hellip;'');
    } else {
        return text;
    }
}

Answer 4

La función toma el texto para verificar, el ancho ideal en píxeles y el nombre de la clase para el css. Si el ideal_width es menor que el ancho del texto, se corta y agrega el hellip, de lo contrario, devuelve el texto sin modificar. Simple y funciona! :-)

function constrain(text, ideal_width, className){

    var temp_item = (''<span class="''+className+''_hide" style="display:none;">''+ text +''</span>'');
    $(temp_item).appendTo(''body'');
    var item_width = $(''span.''+className+''_hide'').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    if (item_width>ideal_width){
        while (item_width > ideal) {
            smaller_text = smaller_text.substr(0, (smaller_text.length-1));
            $(''.''+className+''_hide'').html(smaller_text);
            item_width = $(''span.''+className+''_hide'').width();
        }
        smaller_text = smaller_text + ''&hellip;''
    }
    $(''span.''+className+''_hide'').remove();
    return smaller_text;
}

Answer 5

Si tiene el texto y sabe el tamaño que desea, ¿por qué no usar substr?

Hice algo similar con

$(''#history-1'').text( $(''#history-1'').text().trim().substr(0,32) + "..." )