このjQueryの「テキストの縮小」機能をより効率的にするにはどうすればよいですか？バイナリ検索で？

Question

私はそれはそうと同じように、幅よりも大きくませんまで、テキストのその部分を縮小し、その後、入力としてテキスト文字列と幅を取るjQueryの機能を構築しました：

function constrain(text, ideal_width){ 
    var temp = $('.temp_item'); 
    temp.html(text); 
    var item_width = temp.width(); 
    var ideal = parseInt(ideal_width); 
    var smaller_text = text; 
    var original = text.length; 

    while (item_width > ideal) { 
     smaller_text = smaller_text.substr(0, (smaller_text.length-1)); 
     temp.html(smaller_text); 
     item_width = temp.width(); 
    } 

    var final_length = smaller_text.length; 
    if (final_length != original) { 
     return (smaller_text + '…'); 
    } else { 
     return text; 
    } 
} 

これは正常に動作しますが、私ので、 Safari 4とChromeを除くすべてのブラウザで、多くのテキストに関数を呼び出すと、それは本当に遅いです。

私は、これは、より効率的にするために二分探索法を使用してみましたが、私はこれまでのところ、私のブラウザで遅いスクリプトのダイアログが表示されますしている：

function constrain(text, ideal_width){ 
    var temp = $('.temp_item'); 
    temp.html(text); 
    var item_width = temp.width(); 
    var ideal = parseInt(ideal_width); 

    var lower = 0; 
    var original = text.length; 
    var higher = text.length; 

    while (item_width != ideal) { 

     var mid = parseInt((lower + higher)/2); 
     var smaller_text = text.substr(0, mid); 
     temp.html(smaller_text); 
     item_width = temp.width(); 

     if (item_width > ideal) { 

      // make smaller to the mean of "lower" and this 
      higher = mid - 1; 

     } else { 

      // make larger to the mean of "higher" and this 
      lower = mid + 1; 

     } 
    } 

    var final_length = smaller_text.length; 
    if (final_length != original) { 
     return (smaller_text + '…'); 
    } else { 
     return text; 
    } 
} 

すると、誰もが何を私のアイデアを持っていますこの機能をできるだけ効率的にするにはどうすればよいでしょうか？

ありがとうございます！ Simon

Answer 1

whileの条件(item_width != ideal)はおそらくループを中断しないことがあります。入力テキストを正確な幅であるidealにトリムすることはできません。この場合、関数は永遠にループし、遅いスクリプトダイアログを起動します。

これを回避するには、表示されたテキストのサイズが十分小さい（別の文字を追加するとサイズが大きすぎると思われる）場合はループを停止する必要があります。

Answer 2

私は.engloberがで固定し、オーバーフロー有する2つのdiv

<div class="englober"> 
<div class="title"></div> 
</div> 

を使用：隠された、ホワイトスペース：nowarp。あなたの目的を説明することができ

while ($(".title").width() > $(".englober").width()) 
{ 
    var dFontsize = parseFloat($(".title").css("font-size"), 10); 
    $(".title").css("font-size", dFontsize - 1); 
}