Ich habe angefangen, meinen Lebenslauf mit einer altmodischen HTML-Seite zu erstellen, und habe schnell gemerkt, dass es beim Öffnen auf einem Bildschirm nicht sofort funktioniert. Der Inhalt fließt endlos ohne Seitenumbrüche und es sah ganz sicher nicht wie ein A4-Dokument aus. Um das zu beheben, musste ich ein paar Tricks anwenden, darunter etwas CSS und ein bisschen JavaScript.
Meine Ziele waren:
Als ich anfing, meinen Lebenslauf zu schreiben, wurde mir schnell klar, dass Browser auf Bildschirmgeräten Seitenabmessungen wie A4 nicht berücksichtigen. Stattdessen fließen die Inhalte einfach kontinuierlich weiter, was bedeutet, dass Text und Abschnitte ohne Seitenumbrüche überlaufen können. Um unterschiedliche Seiten auf der Grundlage der A4-Abmessungen zu erstellen, musste ich Seitenumbrüche manuell vornehmen, wenn der Inhalt die Höhe einer typischen A4-Seite überschritt.
Die primäre Lösung bestand darin, CSS @media-Druck- und Seitenumbrucheigenschaften zu verwenden, um zu steuern, wie sich Inhalte verhalten, wenn sie zu lang für eine Seite sind, und JavaScript anzuwenden, um dynamische Inhalte auf Bildschirmen zu verarbeiten.
Um sicherzustellen, dass der Inhalt beim Drucken korrekt fließt, habe ich die Eigenschaft page-break-inside:void verwendet. Diese Eigenschaft verhindert, dass wichtige Elemente wie Überschriften oder große Absätze auf zwei Seiten aufgeteilt werden, sodass der Browser den Inhalt bei Bedarf automatisch in Seiten aufteilen kann.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A4 Styled Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page">
<h1>Title of Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="page">
<h1>Title of Page 2</h1>
<p>Content will automatically break into new pages for printing...</p>
</div>
</body>
</html>
/* Define page layout for A4 size */
@media print {
body {
margin: 0;
padding: 0;
}
.page {
width: 210mm;
height: 297mm;
margin: 0;
padding: 20mm;
page-break-after: always; /* Automatically breaks after each page */
box-shadow: none;
overflow: visible; /* Ensures content flows properly when printing */
}
/* Prevent page breaks inside headers or large paragraphs */
h1, h2, h3, p {
page-break-inside: avoid;
}
}
Während CSS Seitenumbrüche beim Drucken verarbeiten kann, funktionieren Bildschirmgeräte nicht auf die gleiche Weise. Browser teilen Inhalte nicht automatisch in verschiedene Seiten auf dem Bildschirm auf, daher benötigte ich JavaScript, um zu erkennen, wenn Inhalte die A4-Seitengröße überschreiten, und um sie dynamisch in neue Seiten aufzuteilen.
So habe ich das geschafft:
window.onload = function () {
const pages = document.querySelectorAll('.page');
pages.forEach(page => {
if (page.scrollHeight > page.clientHeight) {
splitPageContent(page);
}
});
};
function splitPageContent(page) {
const newPage = document.createElement('div');
newPage.classList.add('page');
const contentToMove = page.innerHTML.slice(page.clientHeight / 2);
newPage.innerHTML = contentToMove;
page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2);
// Insert the new page into the DOM after the current page
page.parentNode.insertBefore(newPage, page.nextSibling);
}
Im Gegensatz zum Drucken fließt der Text auf dem Bildschirm nicht automatisch von einem .page-Div zum nächsten, wenn er überläuft. Der Browser lässt den Inhalt einfach über die Seitengrenzen hinausschwappen. Mit dem obigen JavaScript-Code erkenne ich, wenn Inhalte überlaufen, und teile sie in eine neue Seite auf, wodurch das mehrseitige Erlebnis simuliert wird, das Sie in einem PDF oder Google Docs erwarten würden.
Mit diesem Ansatz verhält sich der Inhalt auf allen Geräten konsistent:
Auf dem Bildschirm: JavaScript erkennt einen Inhaltsüberlauf und erstellt bei Bedarf zusätzliche .page-Divs. Dies simuliert die Erfahrung beim Betrachten eines A4-Dokuments, bei dem Sie zwischen sauber unterteilten Seiten scrollen können.
Im Druck: Die Druck- und Seitenumbrucheigenschaften von CSS @media verwalten automatische Seitenumbrüche beim Drucken, sodass Ihr Dokument auf Papier genauso elegant aussieht.
Um ein HTML-Dokument zu erstellen, das das Erscheinungsbild von A4-Seiten auf Bildschirmgeräten nachahmt, ist eine Kombination aus CSS und JavaScript erforderlich. Während CSS allein den Druckaspekt effektiv bewältigen kann, ist JavaScript für die Verwaltung von Seitenumbrüchen auf dem Bildschirm unerlässlich. Durch die Kombination beider können Sie ein nahtloses Erlebnis gewährleisten, bei dem der Text sauber über die Seiten fließt, sowohl auf dem Bildschirm als auch im Druck.
Das obige ist der detaillierte Inhalt vonSo erhalten Sie das Erscheinungsbild eines HTML-Codes auf Bildschirmgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
