3

高さや幅が固定されていない Div があります。divにはテキストが含まれ、文字列の長さは固定されません。文字列が長すぎて div に収まらない場合、テキストは div の外側に表示されます。必要なのは、幅と高さに基づいて、div に含めることができる文字列の最大長を知ることです。

4

4 に答える 4

4

すべての文字が同じ幅の固定幅フォントを使用していない限り (これは珍しいことです)、質問に対する答えはありません。任意の幅に収まる文字数は、すべての可変幅フォントで「W」などの文字が「i」などの文字よりもはるかに広いため、文字が何であるかによって異なります。

固定幅フォントを使用している場合は、使用しているフォントと font-size および font-style 内の文字の幅を測定する必要があります。次に、幅を文字幅で割り、収まる文字数を決定します。

マージン、パディング、または境界線のない div を作成し、スタイルをposition: absoluteに設定し、目的の font-family と font-size を設定し、div に 1 文字を配置することにより、固定幅フォントを測定することができます。次に、div の offsetWidth を取得することで、div の幅を取得できます。

簡単な例については、http://jsfiddle.net/jfriend00/kHHU7/を参照してください。

固定幅フォントの文字の幅を測定する関数を次に示します。

function getCharWidth(fontFamily, fontSize) {
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.visibility = "hidden";
    div.style.fontFamily = fontFamily;
    div.style.fontSize = fontSize;
    div.innerHTML = "S";
    document.body.appendChild(div);
    var width = div.offsetWidth;
    document.body.removeChild(div);
    return(width);
}

ここで動作することがわかります: http://jsfiddle.net/jfriend00/y4eZr/

于 2012-05-25T23:49:46.960 に答える
1

divでcssoverflow：hiddenを使用する方が良いかもしれませんか？

于 2012-05-25T23:57:05.520 に答える
1

これを処理するには、jQuery プラグインdotdotdotを調べます。どのくらいの長さであるかを知る必要はありません。テキストを適切な長さに切り詰めるすべての作業が自動的に行われます。

于 2012-05-26T00:09:29.167 に答える
0

仕切り要素は流体コンテナ要素であり、実際にはこの種のことを行うようには設計されていません。

これを実現するために私が考えることができる最善の方法はclientWidth、divのを推定フォント幅で割ることです。

var maxChars = div.clientWidth / 5;

于 2012-05-25T23:54:04.773 に答える