當傳遞整數時，截斷寬度函數不起作用

Question

我試圖創建一個通用函數，我可以從多個位置調用遞歸截斷長文本以適應預定義像素寬度 - 使用jquery。

這裏是代碼...

function constrain(text, original, ideal_width){ 

    var ideal = parseInt(ideal_width); 

    $('span.temp_item').remove(); 
    var temp_item = ('<span class="temp_item" style="display:none">'+ text +'</span>'); 
    var item_length = text.length; 
    $(temp_item).appendTo('body'); 
    var item_width = $('span.temp_item').width(); 

    if (item_width > ideal) { 
     var smaller_text = text.substr(0, (item_length-1)); 
     return constrain(smaller_text, original); 
    } else if (item_length != original) { 
     return (text + '&hellip;'); 
    } else if (item_length == original) { 
     return text; 
    } 
} 

如果我像這樣運行功能：

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

文本不會截斷。我也嘗試了175沒有引號。

如果我定義var ideal = 175;在函數內部，那麼它的工作原理。爲什麼傳遞175的函數不工作？如果它是一個字符串，我對它做了一個parseInt。

另外 - 這個截斷代碼在舊機器上運行速度有點慢 - 有關加速它的任何提示？

謝謝！

Answer 1

大這裏的東西。我使用菲爾卡特的功能。我只是希望& hellip的新字符串與其餘字符的截尾寬度相同。

我剛剛添加了另一個臨時寬度查找和遞歸調用。可以使用一些清理，但它的作品。 這裏是新的，而：

while(item_width > ideal) {      
      var smaller_text = text.substr(0, (item_length-1)); 
      return constrain(smaller_text, original, ideal_width, counter); 
    } 

    if (item_length != original) { 
      new_text=text+'…'; 
      $('span.temp_item').remove(); 
      var temp_item = ('<span class="temp_item" style="display:none">'+ new_text +'</span>'); 
      $(temp_item).appendTo('body'); 
      var item_width_new = $('span.temp_item').width(); 
     if(item_width_new>ideal){ 
      var smaller_text = text.substr(0, (item_length-1)); 
      return constrain(smaller_text, original, ideal_width, counter);   
     } 
     else { 
      return new_text; 
     } 
    } else if (item_length == original) { 
      return text; 
    } 
} 

Answer 2

當訪問者按下「ctl +」時會發生什麼？這是我的（可能已過時）相信你應該爲字體容器使用「em」大小，因此它們會縮放。

Answer 3

我們總共寫

所以我決定，你迭代超過5個跨度lorum存有文本，以16秒遠遠太長，所以認爲如何加快這。我把它降到0.4秒。

function constrain(text, original, ideal_width, counter){ 

    var ideal = parseInt(ideal_width); 

    $('span.temp_item').remove(); 
    var temp_item = ('<span class="temp_item" style="display:none">'+ text +'</span>'); 
    var item_length = text.length; 
    $(temp_item).appendTo('body'); 
    var item_width = $('span.temp_item').width(); 

    if(counter == 0) { 
    //work out some ranges 
    var temp_item = ('<span class="temp_item_i" style="display:none">i</span>'); 
     $(temp_item).appendTo('body'); 
     var i_width = $('span.temp_item_i').width(); 

    var max_i = Math.round((ideal_width/i_width) + 1); 

    var temp_item = ('<span class="temp_item_m" style="display:none">M</span>'); 
     $(temp_item).appendTo('body'); 
     var m_width = $('span.temp_item_m').width(); 

    var max_m = Math.round((ideal_width/m_width) + 1); 

    text = text.substr(0, (max_i - max_m)); 

     var item_length = text.length; 
    } 
    counter++; 


while(item_width > ideal) {   
      var smaller_text = text.substr(0, (item_length-1)); 
      return constrain(smaller_text, original, ideal_width, counter); 
    } 

    if (item_length != original) { 

      return (text + '&hellip;'); 
    } else if (item_length == original) { 
      return text; 
    } 
} 

$(document).ready(function() { 
var d = new Date(); 
var s = d.getTime(); 

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

var e = d.getTime() 

alert('Time Taken: ' + ((e - s)/1000)); 
}); 

基本上在第一次運行，它的工作原理有多少小寫我的又有多少大寫的女士適合在空間，然後限制文本長度到，這降低了迭代次數大規模。

希望這會有所幫助。

Answer 4

啊......發現錯誤 - 忘記通過遞歸部分理想寬度：

return constrain(smaller_text, original, ideal);