JavaScript：计算div中可见字符的数量

Question

我有一个包含文本的div，其长度为任意且固定。超过一定长度（称之为L），文本将被截断且剩余部分不再可见（精确地说，范围[0,L)是可见的，范围[L,S)则不可见）。

我想要做的是通过仅计算div中可见字符的数量来找到文本的长度L。超出截断点的任何字符都应被忽略。

如若需要，我愿意使用第三方库，例如jQuery等，以完成这项工作！

- Jonathan Ellis

---

你是想要计算在 overflow: hidden 的 div 中可见的字符数量吗？ - Rory McCrossan

Answer 1

这是我编写的一个用于修剪文本的函数：

function getTextThatFits(txt, w, fSize, fName, fWeight) {
    if (fWeight === undefined)
        fWeight = "normal";

    var auxDiv = $("<div>").addClass("auxdiv").css ({
        fontFamily : fName,
        fontSize : parseInt(fSize) + "px",
        position: "absolute",
        height: "auto",
        marginLeft : "-1000px",
        marginTop : "-1000px",
        fontWeight: fWeight,
        width: "auto"
    })
    .appendTo($("body"))
    .html(txt);

    var ww = (auxDiv.width() + 1);
    var str = txt;

    if (ww > w)
    {
        var i = 1, p = 1, u = txt.length, sol = 0;

        while (p <= u)
        {
            i = (p + u) >> 1;
            str = txt.slice(0, i);
            auxDiv.html(str);
            ww = (auxDiv.width() + 1);
            if (ww <= w) {
                sol = i;
                p = i + 1;
            }
            else u = i - 1;
        }

        str = txt.slice(0, sol);
    }
    $(".auxdiv").remove();
    auxDiv.remove();
    return str.length;
}

我正在使用二分查找来寻找适合特定宽度的文本。 为了使用该函数，您必须像这样调用它：

getTextThatFits(yourText, divWidth, fontSize, fontName, fontWeight=optional)

- gabitzish

---

这看起来是一个很棒的答案。但是，如果您能为我提供稍微调整过的版本，我会非常感激。我真正需要做的不仅仅是获取适合的文本（尽管这段代码很棒！），而是找到截断发生的字符串的索引。问题在于，这个Javascript实际上将在iOS应用程序中的Web视图内运行，我需要获取索引，以便可以与原始字符串匹配。 - Jonathan Ellis

发布的函数已经被修改，以便返回适合的字符串长度，而不是字符串本身。这意味着它返回字符串截断发生的索引位置。或者我有什么遗漏吗？... - gabitzish

太好了！谢谢。我会试一下看看效果如何。 - Jonathan Ellis