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

Question

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

sin embargo no está funcionando (el texto no 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 estoy llamando 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, tipo burbuja), eso sería genial también.

Gracias!

Answer 1

En esta línea:

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

ustedes pueden haber previsto

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

¿Esto soluciona el problema?

Answer 2

Gracias, lo tengo funcionando, pero solo funciona en el primer elemento y se detiene, ¿tiene esto que ver con la forma en que estoy declarando 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 3

la función toma el texto para comprobar, la ideal_width en píxeles y el nombre de clase para el css. Si el valor ideal_width es menor que el ancho del texto, truncs 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 4

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

he hecho algo similar con

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

Answer 5

En lugar de cortar esto junto con la escritura, ¿por qué no usar CSS para especificar el ancho del elemento que está poniendo en esta cadena? Puede usar text-overflow para decirle al navegador que debe truncar con puntos suspensivos.

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

text-overflow es una declaración CSS 3, pero se apoya en el IE 6+, WebKit 312.3+ (Safari 1.3 +/cromo), y Opera 9+ (versiones < 10,7 necesitará la declaración -o-text-overflow).

Tenga en cuenta que was unimplemented in Firefox hasta el 7,0 y under 4% de los usuarios de Firefox siguen utilizando versiones antiguas (principalmente 3.6). Su texto seguirá truncado en versiones anteriores, simplemente no habrá una elipsis representada.Si usted está preocupado acerca de este pequeño grupo de usuarios, puede utilizar this jQuery plugin, que no hace nada en el IE/WebKit/Opera/Firefox ≥ 7, pero emulará text-overflow en Firefox ≤ 6.