私は奇妙な数学の問題を抱えています。複数のデバイスをサポートする HTML/CSS/JS を使用したハイブリッド モバイル アプリを開発しています。このため、入力ボックスの幅を指定していません。
入力ボックスのテキストを切り詰める必要がありますが、幅が指定されていないため、テキスト フィールドの長さをハードコードされた値と比較することはできません。ただし、入力ボックスの長さ (px 単位) を取得でき、使用するフォント サイズは固定 (10 px) です。Xpx x Ypx 入力ボックスに収まる 14px のフォント サイズの文字数を計算する方法はありますか?
過去にこれを達成した方法は効率的ではないかもしれませんが、それはうまくいきます（ほぼ）。
ここで重要なのは、テキストを複製して変更を加えることです。JavaScript を使用すると、このクローンをオンザフライで実行できます。ページの目に見えない div に入れてから、テキストを 1 文字のチャンクに分割します。これらの各文字は、スパンでラップできます。
次のステップは、入力ボックスの幅を確認し、前面から始めて、スパンの幅の合計を開始することです。これは、カスタムの「オフスクリーン」div 内のすべてのスパン要素を取得し、それらを反復処理する場合にすぎません。
魔法の幅の数字に到達すると (またはそれを超えると)、ボックスに入れることができる単語の文字数がわかります。
もちろん、あなたが説明していることには少し癖があります。つまり、ボックスに収まるテキストの「行」数を計算し、それに応じて「合計幅」を修正する必要がある場合があります (幅が 100 ピクセルの行が 1 行ある場合、最大幅は 100 ピクセルになりますが、深さが 3 行の場合、最大幅は 300 ピクセルになります)。
私が言うように、これは効率的なプロセッサ使用法ではないかもしれません...しかし、これは解決策であり、フォントが特定のサイズまたはタイプである必要はありません。