Tronca il testo con jQuery in base alla larghezza del pixel

Question

Sto provando a utilizzare jquery per scrivere una funzione rapida che calcola la larghezza del pixel di una stringa in una pagina HTML, quindi tronca la stringa fino a raggiungere una larghezza di pixel ideale ...

Tuttavia non funziona (il testo non tronca) ...

Ecco il codice che ho:

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; 
    } 
} 

Ecco come sto chiamando dalla pagina:

$('.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); 
}); 

Qualche idea su cosa sto facendo male? Se c'è un modo per farlo più velocemente (es. Bubble sort), sarebbe fantastico.

Grazie!

Answer 1

Su questa linea:

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

voi potrebbero aver destinato

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

fa che risolve il problema?

Answer 2

Grazie, ho funzionato - ma funziona solo sul primo elemento e si arresta, questo ha a che fare con il modo in cui sto dichiarando le variabili?

Ecco il codice corrente:

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 funzione prende il testo per controllare, l'ideal_width in pixel e il nome della classe del css. Se la larghezza ideale è inferiore alla larghezza del testo, tronca e aggiunge l'hellip altrimenti restituisce il testo non modificato. Semplice e funziona! :-)

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

Se si dispone del testo e si conosce la dimensione desiderata, perché non utilizzare solo substr?

ho fatto qualcosa di simile con

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

Answer 5

Piuttosto che l'hacking questo insieme con lo script, perché non basta usare i CSS per specificare la larghezza dell'elemento che stai mettendo questa stringa in? Puoi usare text-overflow per dire al browser che deve troncare con un puntino di sospensione.

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

text-overflow è una dichiarazione di CSS3, ma è supportato in IE 6+, WebKit 312.3+ (Safari 1.3 +/Chrome), e Opera 9+ (versioni < 10,7 bisogno della dichiarazione -o-text-overflow).

Si noti che questo was unimplemented in Firefox fino a 7.0 e under 4% di utenti di Firefox utilizzano ancora versioni precedenti (per la maggior parte 3.6). Il tuo testo sarà troncato ancora nelle versioni precedenti, non ci saranno solo puntini di sospensione.Se sei preoccupato per questo piccolo gruppo di utenti, è possibile utilizzare this jQuery plugin, che non fa nulla in IE/WebKit/Opera/Firefox ≥ 7, ma emulerà text-overflow in Firefox ≤ 6.