Wie implementiert man HTML-Paginierung für WebKit-Browser: Sicherstellen, dass bildschirmgroße Textblöcke vorhanden sind?

HTML-Paginierung: Erstellen von Blöcken in Bildschirmgröße für WebKit-Browser

Frage:

So partitionieren Sie den Textinhalt von Ein HTML-Dokument in bildschirmgroße Abschnitte für die Paginierung in WebKit-Browsern unterteilen, um sicherzustellen, dass jede „Seite“ eine vollständige Texteinheit anzeigt, ohne Zeilen über Bildschirmgrenzen hinweg aufzuteilen?

Antwort:

Um eine HTML-Paginierung in WebKit-Browsern zu erreichen, kann die folgende JavaScript- und CSS-Lösung verwendet werden:

<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>

Dieser Code definiert die gewünschte Höhe und Breite jeder Seite (desiredHeight undscribedWidth). Es berechnet die Gesamthöhe des Dokuments (totalHeight) und ermittelt die Anzahl der benötigten Seiten (pageCount).

Der Abstand des Body-Elements wird angepasst, um zu verhindern, dass Text an den Rändern abgeschnitten wird, sowie seine Breite und Höhe werden so eingestellt, dass sie den gewünschten Seitenabmessungen entsprechen. Schließlich wird die WebkitColumnCount-Eigenschaft verwendet, um Spalten für den paginierten Inhalt zu erstellen.

Das obige ist der detaillierte Inhalt vonWie implementiert man HTML-Paginierung für WebKit-Browser: Sicherstellen, dass bildschirmgroße Textblöcke vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!