与えられたページサイズに収まる行数（またはレコード数）を計算する方法

Question

私の問題は、指定されたページサイズ（インチ）に収まるデータ（文字列）を計算することです。

レポートコントロールを使用せずに単純なバニラHTMLレポートを作成するアプリケーションがあります。これで、このレポートでページングのサポートを提供する必要があります。レポートは本質的に動的です。つまり、実行時に列が決定されます。

ページの幅によっては、複数の行に列を折り返したいと思います。たとえば、ページの幅が8インチの場合、最初の 'n'列だけを第1行に収め、残りの列を第2行（または必要に応じてさらに多くの行）に表示することができます。 8インチ幅のラインに収めることができます。

同様に、指定したページの高さに収まるデータの高さを計算します。

要約すると、与えられたページサイズに適合するデータ量をインチ単位で計算するにはどうすればよいですか。

注：計算では、実行時に決定されたフォントも考慮する必要があります。

Answer 1

ブラウザでレンダリングされたスパンの幅を取得する関数をDOMに追加してOffsetWidthを確認し、再度削除する関数を記述しました。あなたはおそらく他のhtml要素の原則を適応させることができますが、その道を辿ることが非常に効率的になることは間違いありません。私のアプリケーションではこれが必要でしたが、文字列のリストで最も長いレンダリングされたピクセル幅を見つけるためにのみ使用しました。もし私があなただったら、私は大きなテーブルのために他のアプローチを考えていました。

function GetTextWidth(text, font, fontSize) { 
    var size = 0; 
    var spanWidthTestEle = document.createElement("span"); 
    spanWidthTestEle.id = "spanWidthTest"; 
    spanWidthTestEle.style.fontFamily = font; 
    spanWidthTestEle.style.fontSize = fontSize; 
    spanWidthTestEle.innerText = text; 
    document.body.appendChild(spanWidthTestEle); 
    var spanWidthTest = document.getElementById("spanWidthTest"); 
    size = spanWidthTest.offsetWidth; 
    document.body.removeChild(spanWidthTest); 
    return size; 
} 

：

とはいえ、ここでは、関数の