如何使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;
    }
}

有誰知道我應該怎么做才能使此功能盡可能高效？

謝謝！ 西蒙

Answer 1

我用了2格

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

.englober具有一個固定的，且帶有-overflow：hidden，white-space：nowarp。

然后使用jQuery，我調整.title中文本的大小以適合.englober：

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

Answer 2

您的腳本的問題可能是while條件(item_width != ideal)可能永遠不會終止循環。 可能無法將輸入文本修整為ideal的精確寬度。 在這種情況下，您的函數將永遠循環，這將觸發緩慢的腳本對話框。

為了避免這種情況，如果顯示的文本足夠小（也就是添加更多字符會使它太大），則應該停止循環。