Regeln für die Handhabung von HTML-Leerzeichen
Die „Leerzeichen“ in HTML umfassen drei Arten: Leerzeichen, Tabulatorzeichen und Zeilenvorschub (CR/LF).
Wir wissen, dass Leerzeichen im HTML-Quellcode standardmäßig als Leerzeichen angezeigt werden und mehrere aufeinanderfolgende Leerzeichen als eins behandelt werden, oder mit anderen Worten, mehrere aufeinanderfolgende Leerzeichen werden zusammengeführt.
Manchmal hoffen wir jedoch, dass mehrere aufeinanderfolgende Leerzeichen im HTML-Quellcode im Webbrowser realistisch dargestellt werden können, oder wir benötigen, dass die Zeilenumbrüche im Quellcode wie echte Zeilenumbrüche funktionieren. Also haben wir das <pre>-Tag entdeckt, das die wahre Situation der Leerzeichen in seinem internen Text wirklich wiederherstellen kann.
Deshalb fügen wir oft einen Text ein, der Computercode darstellt, in das <pre>-Tag und sie zeigen ihre eigenen Leerzeicheneinrückungen und Zeilenumbrucheffekte im Browser an, ohne dass wir zusätzliche Stile und Tags hinzufügen müssen, um die Einrückung zu steuern und Zeilenumbrüche.
Während wir unser Verständnis von CSS weiter vertiefen, stellen wir fest, dass all dies durch das White-Space-Attribut organisiert wird. Der Grund, warum das <pre>-Element so magisch ist, liegt darin, dass es den Standardstil {white-space: pre;} hat.
Leerraumeigenschaft
Das Attribut „white-space“ in CSS wird verwendet, um die Verarbeitungsregeln für Text-Leerzeichen festzulegen, einschließlich: ob Leerzeichen zusammengeführt werden sollen, ob Zeilenumbrüche beibehalten werden sollen und ob ein automatischer Zeilenumbruch zugelassen werden soll. Die unterschiedlichen Verhaltensweisen der einzelnen Attributwerte sind in der folgenden Tabelle dargestellt:
Werteliste für Leerraumattribute
| Attributwert | Leerzeichen | Newline-Zeichen | Automatischer Zeilenumbruch | erschien erstmals in |
|---|---|---|---|---|
normal | verschmelzen | Vernachlässigung | erlauben | CSS 1 |
nowrap | verschmelzen | Vernachlässigung | nicht erlaubt | CSS 1 |
pre | reservieren | reservieren | nicht erlaubt | CSS 1 |
pre-wrap | reservieren | reservieren | erlauben | CSS 2.1 |
pre-line | verschmelzen | reservieren | erlauben | CSS 2.1 |
( Hinweis : Unter CSS1/2 kann das Leerraumattribut nur auf Elemente auf Blockebene angewendet werden; unter CSS 2.1 kann es auf alle Elemente angewendet werden.)
Wenn wir ein Containerelement benötigen, das ein ähnliches Leerraumverarbeitungsverhalten wie das <pre>-Element aufweist, legen Sie einfach den Stil {white-space: pre;} dafür fest.
Vorverpackung erforderlich
Lassen Sie uns zunächst das Verhalten des „automatischen Zeilenumbruchs“ in der obigen Tabelle erklären. Es bezieht sich auf den Textfluss innerhalb eines Elements, das in Textrichtung eingegeben wird. Wenn der Textfluss auf eine Grenze stößt, die seine weitere Verlängerung einschränkt, wird festgelegt, ob die Zeile umbrochen werden soll. „Zeilenumbruch ist nicht zulässig“ bedeutet, dass der Textfluss über das Element hinausgeht.
Daher entspricht der Stil {white-space: pre;} manchmal nicht unseren Erwartungen. Beispielsweise möchten wir in einigen Situationen, in denen keine besondere Strenge erforderlich ist, oder bei der Formatierung einiger Codefragmente, die nicht auf Zeilenumbrüche reagieren (z. B. HTML oder CSS), nicht, dass eine lange Codezeile im Codefragment dazu führt Containerelement zum horizontalen Scrollen, da es schwer zu lesen ist. Wir hoffen, dass in diesem Fall der lange Code automatisch umgebrochen wird.
Wenn wir zu diesem Zeitpunkt die unterschiedlichen Verhaltensmerkmale jedes Attributwerts in der obigen Tabelle vergleichen, werden wir feststellen, dass der Pre-Wrap-Attributwert auffällt – er ist genau das, was wir brauchen.