Umgang mit Leerzeichen in CSS

1. Weltraumregeln

Leerzeichen im HTML-Code werden von Browsern normalerweise ignoriert.

<p> Hallo Welt </p>

Oben ist eine HTML-Codezeile mit zwei Leerzeichen am Anfang, im Text und am Ende des Textes.

Die Browserausgabe lautet wie folgt: Hallo Welt

Wie Sie sehen, werden die Leerzeichen am Anfang und Ende des Textes ignoriert und die fortlaufenden Leerzeichen darin nur als eins gezählt. Dies ist die Grundregel für den Umgang von Browsern mit Leerzeichen.

Wenn Sie Leerzeichen unverändert ausgeben möchten, können Sie das Tag <pre> verwenden.

<pre> hallo Welt </pre>
Ein anderer Ansatz besteht darin, stattdessen HTML-Entitäten zur Darstellung von Leerzeichen zu verwenden.
<p> Hallo Welt </p>

2. Leerzeichen

Die HTML-Regeln zum Umgang mit Leerzeichen gelten für viele Zeichen. Es umfasst neben der normalen Leertaste auch Tabulator (t) und Zeilenvorschub (r und n).

Der Browser wandelt diese Symbole automatisch in normale Leertasten um.

<p>Hallo
Welt</p>

Im obigen Code enthält der Text einen Zeilenumbruch, den der Browser als Leerzeichen interpretiert. Die Ausgabe lautet wie folgt: hallo Welt

Daher haben Zeilenumbrüche innerhalb des Textes keine Auswirkung (es sei denn, der Text ist in <pre>-Tags eingeschlossen).

<p>hallo<br>Welt</p>

Der obige Code verwendet

Tags weisen explizit auf Zeilenumbrüche hin

3. CSS-Leerzeicheneigenschaft

Die Speicherplatzverarbeitung der HTML-Sprache ist grundsätzlich eine direkte Filterung. Dies ist eine zu grobe Vorgehensweise und ignoriert völlig die Tatsache, dass Leerzeichen im Originaltext eine Bedeutung haben können.

CSS stellt eine Leerzeicheneigenschaft bereit, die einen präziseren Umgang mit Leerzeichen ermöglicht. Dieses Attribut hat sechs Werte, mit Ausnahme der allgemeinen Vererbung (Erbung des übergeordneten Elements). Die verbleibenden fünf Werte werden unten vorgestellt.

3.1 Leerzeichen: normal

Der Standardwert der Whitespace-Eigenschaft ist „normal“, was bedeutet, dass der Browser Leerzeichen auf normale Weise verarbeitet.

html:
    <p> hallohallohallo hallo
    Welt
    </p>
Stil:
    P {
        Breite: 100px;
        Hintergrund: rot;
    }

Im obigen Code gibt es am Anfang des Textes zwei Leerzeichen und darin ein langes Wort und einen Zeilenumbruch.

Führende Leerzeichen werden ignoriert. Da der Container zu schmal ist, läuft das erste Wort über den Container hinaus und wird dann beim nächsten Leerzeichen umbrochen. Zeilenumbrüche innerhalb des Textes werden automatisch in Leerzeichen umgewandelt.

3.2 Leerzeichen: nowrap

Wenn die Whitespace-Eigenschaft auf „Nowrap“ gesetzt ist, kommt es nicht zu Zeilenumbrüchen aufgrund einer Überschreitung der Containerbreite.

P {
    Leerzeichen: Nowrap;
}

Der gesamte Text wird in einer Zeile ohne Umbruch angezeigt.

3.3 Leerzeichen: vor

Wenn das Whitespace-Attribut voreingestellt ist, wird es auf die gleiche Weise wie das <pre>-Tag verarbeitet.

P {
    Leerzeichen: vor;
}

Das obige Ergebnis ist exakt dasselbe wie der Originaltext und alle Leerzeichen und Zeilenumbrüche bleiben erhalten.

3.4 Leerzeichen: Vorumbruch

Beim Vorumbrechen des Whitespace-Attributs wird es grundsätzlich genauso verarbeitet wie das <pre>-Tag. Der einzige Unterschied besteht darin, dass bei Überschreiten der Containerbreite ein Zeilenumbruch erfolgt.

P {
    Leerzeichen: vor dem Umbruch;
}

Dabei bleiben die Leerzeichen am Textanfang, die Leerzeichen innerhalb des Textes sowie die Zeilenumbrüche erhalten und Zeilen werden dort umgebrochen, wo sie über den Container hinausgehen.

3.5 Leerzeichen: vor der Zeile

Wenn die Leerzeicheneigenschaft vor der Zeile steht, bedeutet dies, dass Zeilenumbrüche beibehalten werden. Abgesehen davon, dass Zeilenumbrüche unverändert ausgegeben werden, entspricht alles andere der Regel „white-space:normal“.

P {
    Leerzeichen: vor der Zeile;
}

Abgesehen davon, dass Zeilenumbrüche innerhalb des Textes nicht in Leerzeichen umgewandelt werden, verhält es sich ansonsten wie bei den normalen Verarbeitungsregeln. Dies ist für Texte im Gedichtstil nützlich.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.