Piksel genişliği temel alınarak jQuery ile metin kırpma

Question

Bir html sayfasındaki bir dizenin piksel genişliğini hesaplayan hızlı bir işlev yazmak için jquery'yi kullanmaya çalışıyorum, sonra da ideal bir piksel genişliğine ulaşana kadar dizgiyi keser ...

o (metin kesecek değil) çalışmıyor Ancak ... İşte

olan kod ben:

İşte

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

ben sayfasından arıyorum açıklanmıştır:

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

Neyi yanlış yaptığım hakkında bir fikrin var mı? Bunu daha hızlı yapmak için bir yol varsa (yani baloncuğu), bu da harika olurdu.

Teşekkürler! Bu satırda

Answer 1

:

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

sorunu çözmek

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

mu istemiş olabilir?

Answer 2

Teşekkürler, çalışıyorum - ama sadece ilk maddede çalışıyor ve durur, bu değişkenleri bildirdiğim şekilde mi yapıyor?

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

fonksiyonu kontrol edilecek metin alır piksel olarak ideal_width ve css için sınıf ismi:

burada geçerli kod var. İdeal_width, metin genişliğinden daha azsa, sarılır ve hellip ekler, aksi halde, değiştirilmemiş metni döndürür. Basit ve çalışır! :-)

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

Metne sahipseniz ve istediğiniz boyutu biliyorsanız, neden sadece substr?

Ben

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

Answer 5

yerine birlikte komut dosyası ile bu hack ile benzer bir şey yaptı, neden sadece içine bu dize koyarak konum elemanın genişliğini belirtmek için CSS kullanabilirsiniz? Tarayıcıya bir elips ile kırpması gerektiğini bildirmek için text-overflow'u kullanabilirsiniz.

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

text-overflow

312.3+ (Safari 1.3 +/Krom) ve Opera 9+ (sürüm < 10.7 -o-text-overflow beyanı gerekir) bir CSS3 beyanı olduğunu, ancak WebKit, IE 6+ desteklenir.

Not: Bu was unimplemented in Firefox, 7.0'a kadar ve Firefox kullanıcılarının under 4% hala eski sürümlerini kullanıyor (çoğunlukla 3.6). Metniniz daha eski sürümlerde kesilmeye devam edecek, sadece elips oluşmayacak.Eğer kullanıcı bu küçük grubu hakkında endişeleriniz varsa, sen hiçbir şey yapmaz, hangi this jQuery plugin kullanabilirsiniz IE/WebKit/Opera/Firefox ≥ 7, fakat Firefox text-overflow taklit edecek ≤ 6.