Wie man mit Leerzeichen in CSS umgeht

White-Space-Attribut

CSS bietet ein White-Space-Attribut, das eine präzisere Möglichkeit zum Umgang mit Leerzeichen bieten kann. Dieses Attribut hat insgesamt sechs Werte. Zusätzlich zu einer gemeinsamen Vererbung (Erbung des übergeordneten Elements) werden im Folgenden die verbleibenden fünf Werte vorgestellt.

1. Leerzeichen: normal

Der Standardwert des Leerzeichenattributs ist normal, was bedeutet, dass der Browser Leerzeichen normal verarbeitet.

html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

Im obigen Code gibt es zwei Leerzeichen vor dem Text, ein langes Wort und ein Zeilenumbruchzeichen darin.

Leerzeichen am Anfang des Textes werden ignoriert. Da der Container zu schmal ist, läuft das erste Wort über den Container hinaus und schließt ein Leerzeichen dahinter ein. Zeilenumbrüche innerhalb des Textes werden automatisch in Leerzeichen umgewandelt.

Verwandte Tutorial-Empfehlungen:

CSS-Video-Tutorial, Lernadresse: https://www.php.cn/course/list/12.html

2. Leerraum: Nowrap

Wenn das Leerraumattribut Nowrap ist, erfolgt kein Zeilenumbruch, da die Breite des Containers überschritten wird.

p {
    white-space: nowrap;
}

Der gesamte Text wird als eine Zeile ohne Umbruch angezeigt.

3. White-Space: Pre

Wenn das White-Space-Attribut pre ist, wird es auf die gleiche Weise wie das

-Tag verarbeitet. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
    white-space: pre;
}

Nach dem Login kopieren

Das obige Ergebnis ist genau das gleiche wie der Originaltext, alle Leerzeichen und Zeilenumbrüche bleiben erhalten.

4. Leerraum: Vorumbruch

Wenn das Leerraumattribut vorumgebrochen ist, wird es grundsätzlich auf die gleiche Weise verarbeitet wie das < pre>-Tag, der einzige Unterschied besteht darin, dass ein Zeilenumbruch erfolgt, wenn die Breite des Containers überschritten wird.

p {
    white-space: pre-wrap;
}

Die Leerzeichen am Anfang des Textes, interne Leerzeichen und Zeilenumbrüche bleiben alle erhalten und Zeilenumbrüche erfolgen außerhalb des Containers.

5. Leerzeichen: Vorzeile

Wenn das Leerzeichenattribut vorzeilig ist, bedeutet dies, dass Zeilenumbrüche beibehalten werden. Bis auf das Newline-Zeichen, das so ausgegeben wird, wie es ist, entspricht alles andere der Regel „white-space:normal“.

p {
    white-space: pre-line;
}

Abgesehen davon, dass die Zeilenumbrüche im Text nicht in Leerzeichen umgewandelt werden, sind die anderen Verarbeitungsregeln im Einklang mit dem Normalen. Dies ist nützlich für Texte vom Typ Poesie.

Weitere Inhalte zum Thema Programmierung finden Sie in der Spalte Einführung in die Programmierung auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonWie man mit Leerzeichen in CSS umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!