HTML pre: Leerzeichen erhalten und lange Zeilen umbrechen
HTML <pre> markiert einen vorformatierten Textbereich, der Leerzeichen und Zeilenumbrüche beibehält. Kombinieren Sie es mit <code> für Quellcode und verwenden Sie CSS white-space: pre-wrap, wenn lange Zeilen auf die verfügbare Breite umgebrochen werden sollen.
Unterschied zwischen pre und normalen Absätzen
Reguläre Absätze fassen aufeinanderfolgende Leerzeichen und Zeilenumbrüche im Quelltext gemäß den Standard-CSS-Einstellungen zusammen. Das pre-Tag behält diesen Abstand standardmäßig bei, wodurch es für Code mit Einrückungen, Protokolle und Text geeignet ist, bei dem gleichmäßiger Abstand wichtig ist. Die Standardschriftart ist normalerweise monospaced, aber Schriftarten und die Behandlung von Leerzeichen können mit CSS geändert werden.
Sie können tabellenähnliche Darstellungen mit Leerzeichen ausrichten, aber das liefert nicht die tatsächlichen Zeilen- und Spaltenbeziehungen einer Tabelle. Verwenden Sie table für Vergleichsdaten, und wenn Bedeutung durch Abstände wie bei ASCII-Art vermittelt wird, liefern Sie Erklärungen, die von Screenreadern verstanden werden können.
Vollständiges Beispiel: Beibehaltung von Leerzeichen und Umgang mit langen Zeilen
Speichern Sie das folgende Dokument als pre-demo.html und öffnen Sie es in einem Browser. Speichern Sie die Datei in UTF-8, und es werden keine externen Bibliotheken benötigt. Horizontaler Bildlauf und Zeilenumbruch wurden separat auf dieselbe lange Zeichenkette angewendet.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leerzeichen und Zeilenumbrüche mit pre</title>
<style>
body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
pre { padding: 1rem; background: #eef2f4; }
.scroll { overflow-x: auto; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Leerzeichen und Zeilenumbrüche</h1>
<p>one two
three</p>
<pre>one two
three</pre>
<h2>Horizontaler Bildlauf</h2>
<pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Zeilenumbruch</h2>
<pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>HTML-Quelltext anzeigen</h2>
<pre class="scroll"><code><p>Hello & welcome</p></code></pre>
</body>
</html>Der erste Absatz verschmilzt zu einer Zeile gemäß der Standard-Leerzeichenbehandlung, und das folgende pre bewahrt die vier Leerzeichen zwischen den Wörtern one und two und die vier Leerzeichen vor dem Wort three. Wenn der Bildschirm verengt wird, erhält das Scroll-Beispiel horizontalen Bildlauf, und das Umbruch-Beispiel bricht sogar lange Wörter in die nächste Zeile. Im HTML-Quellcode-Anzeigebereich erscheint <p>Hello & welcome</p> als Text in Tag-Form.
HTML innerhalb von pre wird ebenfalls interpretiert.
Pre ist kein Element, das die HTML-Interpretation verhindert. Wenn Sie ein tatsächliches <strong>-Tag darin schreiben, wird die Bedeutung des Tags angewendet. Um HTML-Quelltext als Text anzuzeigen, maskieren Sie < zu < und & zu &. Das letzte Beispiel des gesamten obigen Dokuments verwendet dieses Prinzip.
Der erste Zeilenumbruch unmittelbar nach dem Pre-Start-Tag wird vom HTML-Parser entfernt. Nachfolgende Zeilenumbrüche und die Einrückung im Code werden beibehalten. Überprüfen Sie daher die tatsächliche Startposition des Textes, um sicherzustellen, dass keine Leerzeichen für die Dokumentausrichtung auf dem Bildschirm erscheinen. Beim dynamischen Anzeigen von Code können Sie die Zeichenfolge mithilfe von textContent statt innerHTML einfügen, um zu verhindern, dass sie als Tags interpretiert wird.
Punkte, die überprüft werden sollten, wenn der automatische Zeilenumbruch nicht erfolgt
Wenn Sie nur overflow-wrap angeben und die Standardwerte von white-space: pre beibehalten, können die gewünschten Zeilenumbrüche möglicherweise nicht erscheinen. Um Leerzeichen und Zeilenumbrüche beim Umbruch am Bildschirmrand zu erhalten, wenden Sie pre-wrap an, und um lange Zeichenketten ohne Leerzeichen zu trennen, geben Sie auch overflow-wrap an. Umgekehrt, wenn Sie eine einzeilige Struktur für den Code beibehalten müssen, belassen Sie pre und stellen Sie intern ein Scrollen mit overflow-x: auto bereit.
pre bewahrt das Textlayout, und code zeigt an, dass der Inhalt Code ist. Die gleichzeitige Verwendung beider erzeugt nicht automatisch eine Syntaxhervorhebung, und ein Highlighter oder separates CSS wird benötigt. Anstatt sich auf die alten Attribute width und wrap zu verlassen, passen Sie die Anzeige mit CSS an. Weitere Einzelheiten finden Sie im HTML-Standard: pre und in der MDN-Referenz zu pre.
