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 text_len_lower = 0;
    var smaller_text = text;
    var text_len_higher = text.length;

    while (true) {
        if (item_width > ideal) {

            // make smaller to the mean of "lower" and this
            text_len_higher = smaller_text.length;
            smaller_text = text.substr(0, ((text_len_higher + text_len_lower)/2));

        } else {

            if (smaller_text.length >= text_len_higher) break;

            // make larger to the mean of "higher" and this
            text_len_lower = smaller_text.length;
            smaller_text = text.substr(0, ((smaller_text.length + text_len_higher)/2));

        }

        temp.html(smaller_text);
        item_width = temp.width();
    }

    var new_text = smaller_text + '&hellip;'
    return new_text;
}

不幸的是，这会导致我的浏览器中永远无法完成的“慢速脚本”。 Firebug指向jquery.js（版本1.3.2）的第1131行，这是“独特的”jQuery实用程序，作为罪魁祸首。然而，我并没有在任何地方使用“独特”。

我在这里做错了什么？

Answer 1

你可以连接一个javascript调试器并检查崩溃的位置吗？使用Firebug与Firefox或MSVS与IE。如果调试器死得太厉害，请逐步执行该函数，看看它到底有多远。

根据上次评论进行更新：我认为您需要逐步完成代码，看看它有多远。我会怀疑一些事情：

在设置新的内部文本后，可能尚未重新计算对象的宽度（或已变为无效）。可能是更新的宽度直到稍后，当UI进行重新调整时才可用。
理论上这个循环应该总是终止，但它可能（特别是如果浏览器没有正确地重新计算宽度）循环可以永远继续。
分割内部文本时可能会拆分HTML标记，导致代码插入格式错误的HTML，从而导致页面布局中断。

Answer 2

您正在尝试实施已存在的内容：

CSS的text-overflow:ellipsis属性。不幸的是，它只有IE支持，但jQuery插件为Firefox带来了功能。谷歌的“文字溢出：省略号火狐”因为我还不允许发布链接。

如何使用二进制搜索方法创建缩小字符串的jQuery函数？

2 个答案: