JavaScriptを使用して行の文字数をカウントする方法

Question

divに幅200pxとfont-size16があるとします。これでdivの行に収まる文字の数を計算します。 JavaScriptまたはjQueryを使用して文字数を計算するにはどうすればよいですか？

Answer 1

更新：ああ、私は隠されたコメントを見落としました。上に掲示されたCSSソリューションは、仕事にとって明らかに優れています。私の答えは、1行に収まる文字を数えるという問題に直接対処しています。私はそれを削除するつもりはないので、誰かが実際にそれを役に立つと思うかもしれない。

比例した書体を使っていても、1行に収まる文字数を得ることは間違いありません。次の方法を使用する方法と方法をCanvasRenderingContext2Dの2通りの方法があります。

var target_width = 200; // line width 
var text = 'Lorem ipsum. I want to know how many chars of this text fit.'; 

var span = document.createElement('span'); 
document.body.appendChild(span); 
span.style.whiteSpace = 'nowrap'; 
// define the style 
span.style.fontFamily = 'Lucida Grande'; 
span.style.fontSize = '14px'; 

var fit = text.length; 
for (var i = 0; i < fit; ++i) { 
    span.innerHTML += text[i]; 
    if (span.clientWidth > target_width) { 
    fit = i - 1; 
    break; 
    } 
} 

document.body.removeChild(span); 

// fit = the number of characters of the text 
//  that you can fit on one line 

Answer 2

実は、私はあなたがCSSでこれを行うことができ

（テキストの長さが非常に大きい）、それはまさにそのdiv要素の中に に合うように、divの内側に私のテキストを切り詰めたい：

white-space: nowrap; 
overflow:hidden; 
text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..." 

http://jsfiddle.net/46AML/

Answer 3

各文字の幅が同じ場合、1行あたりの文字数しか計算できません。これは、stackoverflowの質問エディタにあるようなすべての固定幅フォントに当てはまります。

固定幅フォントの使用を確実にすると、1文字の幅を計算することができます。 function posted in this answerを使用してください。次に、単に文字の幅を使って<div>の幅を分割します。