Javascript:计算div中的可见字符

Question

我有一个 div，其中包含任意长度但固定大小的文本(长度为 S 的字符串)。超过一定长度(我们称之为 L)，文本将被 chop 并且文本的其余部分不再可见。 (从技术上讲，[0,L) 范围可见，[L,S) 范围不可见)。

我想做的是通过仅计算 div 中的visible 字符数来找到文本的长度 L。应忽略超出分界点的任何字符。

如果可以完成工作，我很乐意使用 jQuery 等第 3 方库!

Answer 1

这是我为 trim 文本而创建的函数:

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)