HTML要素に収まる最大文字数を決定する方法

Question

私はHTMLフィールドを持っており、そのフィールドに指定フォントとフォントサイズでオーバーフローすることなく安全に入力できる最大文字数を決定したいと考えています。

エレメントがcourier newまたはその他の固定幅フォントを使用していて、改行がない場合、これは簡単な問題です。要素をオーバーフローするまでテキストを入力し、使用された文字の数を数えます。

文字あたりのスペースが異なるフォントを使用すると、これは難しくなります。これを安全に計算する方法はありますか？通常は、より早期に線を壊す「Pneumonoultramicroscopilicovolcanoconiosis」などの異常値を無視するために、任意の最大または平均語長を構成することがあります。

想定されるのは、フォント内の「最も広い」共通文字の幅と、改行時に失われるスペースを考慮する最大語長です。そうでなければ、私はバッファの安全な量で概算を提供するでしょう。

明確にするために、これはプログラム的に特定の長さの入力を防止することではありません - これらの制限は事前に明示的に伝えられます。これは決まっているのです。何がであるかは、それをファジィ推測するのではなく、

Answer 1

• 文字
• でテキスト文字を追加
• メモリ内の事業部を作成し、フォントや文字サイズに応じてテキストの幅の計算値を取得します。

だから、コードを編集し、ループ内でそれをラップ：

var newDiv = document.createElement("span"); 
 
newDiv.className ="fontVerdana" 
 
newDiv.style ="display:inline-block;" 
 

 

 
newDiv.innerText ="this is a test "; 
 
document.body.appendChild(newDiv); 
 

 
// returns the width based on the content/40px Verdana 
 
alert("based on the content/40px Verdana => "+ window.getComputedStyle(newDiv,null).getPropertyValue("width")); 
 

 
newDiv.innerText ="this is a test that will show how big this box is"; 
 
// returns the width based on the content/40px Verdana 
 
alert("40px Verdana =>" + window.getComputedStyle(newDiv,null).getPropertyValue("width")); 
 

 
newDiv.className ="fontSerif" 
 
newDiv.innerText ="this is a test that will show how big this box is"; 
 
// returns the width based on the content/20px Serif 
 
alert("20px Serif => " + window.getComputedStyle(newDiv,null).getPropertyValue("width")); 
 

 
newDiv.className ="fontMonoSpace" 
 
newDiv.innerText ="this is a test that will show how big this box is"; 
 
// returns the width based on the content/10px Monospace 
 
alert("10px Monospace => " + window.getComputedStyle(newDiv,null).getPropertyValue("width"));

.fontVerdana 
 
{ 
 
    font-family:verdana; 
 
    font-size:40px; 
 
} 
 

 
.fontSerif 
 
{ 
 
    font-family:serif; 
 
    font-size:20px 
 
} 
 

 
.fontMonoSpace 
 
{ 
 
    font-family:monospace; 
 
    font-size:10px; 
 
}