Cắt ngắn văn bản bằng jQuery dựa trên độ rộng pixel

Question

Tôi đang cố gắng sử dụng jquery để viết chức năng nhanh để tính chiều rộng pixel của một chuỗi trên trang html, sau đó cắt bớt chuỗi cho đến khi đạt đến chiều rộng pixel lý tưởng ...

Tuy nhiên nó không làm việc (văn bản không cắt xén) ...

đây là mã tôi có:

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

đây là cách tôi gọi nó từ trang:

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

Bất kỳ ý tưởng nào về những gì tôi đang làm sai? Nếu có một cách để làm điều đó nhanh hơn (tức là loại bong bóng), điều đó cũng sẽ tuyệt vời.

Cảm ơn!

Answer 1

On line này:

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

bạn có thể đã dự định

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

Liệu rằng giải quyết vấn đề?

Answer 2

Cảm ơn, tôi đã làm việc đó - nhưng nó chỉ hoạt động trên mục đầu tiên và dừng lại, điều này có liên quan đến cách tôi tuyên bố biến không?

đây là mã hiện tại:

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

Chức năng mất văn bản để kiểm tra, ideal_width trong pixel và tên lớp cho css. Nếu ideal_width nhỏ hơn chiều rộng văn bản nó cắt ngắn và thêm hellip nếu không nó sẽ trả về văn bản chưa được sửa đổi. Đơn giản và hoạt động! :-)

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

Nếu bạn có văn bản và biết kích thước bạn muốn, tại sao không chỉ sử dụng chất nền?

tôi đã làm một cái gì đó tương tự với

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

Answer 5

Thay vì hack này cùng với kịch bản, tại sao không chỉ sử dụng CSS để xác định chiều rộng của phần tử bạn đang đặt chuỗi này vào? Bạn có thể sử dụng text-overflow để thông báo cho trình duyệt rằng nó sẽ cắt ngắn bằng dấu ba chấm.

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

text-overflow là một tuyên bố CSS3, nhưng được hỗ trợ trong IE 6 +, WebKit 312.3+ (Safari 1.3 +/Chrome), và Opera 9 + (phiên bản < 10,7 cần khai báo -o-text-overflow).

Lưu ý rằng điều này was unimplemented in Firefox cho đến 7.0 và under 4% người dùng Firefox vẫn đang sử dụng các phiên bản cũ (chủ yếu là 3.6). Văn bản của bạn sẽ vẫn bị cắt ngắn trong các phiên bản cũ hơn, sẽ không có dấu ba chấm được hiển thị.Nếu bạn quan tâm đến nhóm người dùng nhỏ này, bạn có thể sử dụng this jQuery plugin, không có gì trong IE/WebKit/Opera/Firefox ≥ 7, nhưng sẽ mô phỏng text-overflow trong Firefox ≤ 6.