当传递整数时，截断宽度函数不起作用

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