WebKit ブラウザに HTML ページネーションを実装する方法: 画面サイズのテキストの塊を確保するには?

HTML ページネーション: WebKit ブラウザ用の画面サイズのチャンクの作成

質問:

のテキスト コンテンツを分割する方法WebKit ブラウザでのページ分割のために HTML ドキュメントを画面サイズのセクションに分割し、各「ページ」に画面の境界を越えて行を分割することなく完全なテキスト単位が表示されるようにしますか?

答え:

WebKit ブラウザで HTML ページネーションを実現するには、次の JavaScript および CSS ソリューションを使用できます:

<code class="javascript">var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight / desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;</code>

このコードは、各ページの希望の高さと幅 (desiredHeight とdesiredWidth) を定義します。ドキュメントの合計の高さ (totalHeight) を計算し、必要なページ数 (pageCount) を決定します。

本文要素のパディングは、テキストが端で切れないように調整され、その幅と高さも調整されます。希望のページサイズに合わせて設定されます。最後に、WebkitColumnCount プロパティを使用して、ページ分割されたコンテンツの列を作成します。

以上がWebKit ブラウザに HTML ページネーションを実装する方法: 画面サイズのテキストの塊を確保するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。