Heim > Artikel > Web-Frontend > So erhalten Sie das Erscheinungsbild eines HTML-Codes auf Bildschirmgeräten

So erhalten Sie das Erscheinungsbild eines HTML-Codes auf Bildschirmgeräten

Susan SarandonOriginal: 2024-09-21 06:26:32842Durchsuche

How to Have the Look and Feel of An HTML on Screen devices

So erhalten Sie das Erscheinungsbild von A4 in HTML auf Bildschirmgeräten

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:

Damit mein Lebenslauf auf dem Bildschirm genauso aussieht wie ausgedruckt.
Zum Anzeigen einzelner Seiten auf dem Bildschirm, genau wie ein PDF- oder Google Docs-Dokument.

Herausforderungen beim Erstellen eines Lebenslaufs in HTML

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.

1. Automatische Seitenumbrüche mit CSS (für den Druck)

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.

Beispiel-HTML zum Drucken:

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

CSS zum Drucken:

/* 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;
  }
}

So funktioniert dieses CSS:

Seitenumbruch nach: immer; stellt sicher, dass der Inhalt nach jedem .page div im Druckmodus in eine neue Seite umgebrochen wird.
Seitenumbruch innen: vermeiden; verhindert, dass Kopfzeilen oder große Abschnitte umständlich auf zwei Seiten aufgeteilt werden, was für die Aufrechterhaltung eines sauberen, professionellen Aussehens beim Drucken unerlässlich ist.

2. Seitenumbrüche auf dem Bildschirm mit JavaScript behandeln

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:

JavaScript für die dynamische Seitenaufteilung:

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);
}

Warum JavaScript benötigt wird:

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.

3. Gewährleistung eines konsistenten Seitenflusses auf dem Bildschirm und im Druck

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.

Abschluss

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!

JavaScript css html print for while break using Property this display overflow

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nur CSS-Shining Stroke ✨!Nächster Artikel：Nur CSS-Shining Stroke ✨!

In Verbindung stehende Artikel

Mehr sehen