5

div任意の長さのテキスト（長さの文字列）を含むがS、サイズが固定されているがあります。特定の長さを超えると（これをL）と呼びますが、テキストは切り捨てられ、残りのテキストは表示されなくなります。（技術的には、範囲[0,L)は表示されますが、範囲は表示[L,S)されません）。

私がやりたいのは、で表示されている文字数だけを数えて、テキストの長さを見つけるLことです。カットオフポイントを超える文字は無視する必要があります。div

仕事がうまくいくなら、jQueryなどのサードパーティライブラリを使用できてうれしいです！

4

1 に答える 1

2

テキストをトリミングするために作成した関数は次のとおりです。

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)
于 2012-04-11T10:41:37.513 に答える