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: //m.sbmmt.com/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;
}