多くのレターdivフィットを見つける

Question

標準の幅と高さを持つdivがあります。 divがオーバーフローしないようにいくつの文字を計算するには、どのCSSパラメータが必要ですか？ 私は、その後どのように私は計算することができます。..

1. フォントサイズ
2. テキストINDEXT
3. 文字間隔
4. 行の高さ

次parametrsがneccesseryだと思いますdivの最大文字数は？

Answer 1

まず、divに固定CSSがあるとします：

width 
height 
line-height 
font-size 
font-family 
etc. 

私は、これは別のテキストで何度もDIV（多分フォーム実際の記事を引っ張っ）と異なるブラウザでこれを行う埋めるためにいくつかのJavaScriptを記述します。各時間は、入力する最大文字数を計算しますが、divをオーバーフローしません。次に、常にdivを埋めるために送信する必要がある数字の文字の上限があります。スライダの各記事をその番号に切り捨てます。オーバーフローを確実にするために10文字を追加し、オーバーフロー隠しや楕円などを使用することができます。

Answer 2

すでにスクリーンに描画されているオブジェクトに対してgetClientRects（）を使用できますが、レンダリングする前にこれを計算するとしますか？

編集：ああ、私はあなたがJavascriptを使用できないと言ったことに気付いた。申し訳ありませんが、私はあなたがJavascriptで意味していたと仮定しました。それは問題を変えます。
サーバー側では、ブラウザが使用するフォント、各文字の幅をピクセル単位で切り捨てるかどうかなどはわかりません。

Answer 3

異なるブラウザで異なるレンダリング方法、異なるosses、さらにはグラフィックアダプタがあると、アンチエイリアスをわずかに異なるものにする可能性があるため、divに収まる文字数は非常に難しくなります。役割を果たす可能性のあるもう1つの要因は、1インチあたりのピクセル数であり、出力ディスプレイに表示されます。これに加えて、フォント自体とテキストが役割を果たします。これは通常、フォントの固定を扱わないためです。だから、使用されるハードウェア、ソフトウェア、詳細なフォントパラメータについて知る必要があります。これは、javascriptの範囲外です。

はとにかくあなたがテキストを超えた場合、あなたが見つけるために一定の幅と高さとscrollLeftとscrollTopスプライト・プロパティで隠しタグを使うことが知りたい内容に応じて...

方法があるかもしれませんタグのサイズこれは、scrollLeftおよび/またはscrollTop-Propertiesを非常に高い値（例えば、99999）に設定することによって達成され、ブラウザによって実際の値に置き換えられる。これらの値は0または0より大きい。値が0より大きい場合、値はピクセル数を表し、テキストはオーバーフローします。

隠しフィールドのために重要なのは、それが（のappendChildで）ドキュメントノードツリーに追加されなければならないこと、である

あなたは文字（またはテキスト）を記入するループを作成することができますあなたの隠された正確持っているに提出へソースタグ/フィールドと同じプロパティ（cloneNode（true）を使用）ループ内で、scrollLeft/scrollTopでオーバーフローをチェックします。オーバーフローした場合、最大のテキストが表示され、タグが表示されます。少し速度を上げるために、非表示のタグをブラウザのビューから移動することができます（例：left：10000px;）。

測定後、ノードツリーから隠しタグを削除することができます。広範な使用には注意が必要です。実装は比較的高速ですが、フロントエンドの状況でクライアント側で数十回のチェックを実行する場合は、ブラウザの種類、プロセッサの速度、およびクライアントのシステム負荷に応じて、側。