Umgang mit Leerzeichen in CSS (Beispiel)

Der Inhalt dieses Artikels befasst sich mit der Verarbeitung von Leerzeichen in CSS (Beispiele). Ich hoffe, dass er für Freunde hilfreich ist.

1. Leerzeichenregeln

Leerzeichen im HTML-Code werden normalerweise von Browsern ignoriert.

<p>◡◡hello◡◡world◡◡</p>

Das Obige ist eine Zeile HTML-Code mit jeweils zwei Leerzeichen vorne, innen und hinten im Text. Zur leichteren Identifizierung wird hier das halbkreisförmige Symbol ◡ zur Darstellung von Leerzeichen verwendet.

Die Browserausgabe ist wie folgt.

hello world

Wie Sie sehen, werden die Leerzeichen vor und nach dem Text ignoriert und die aufeinanderfolgenden Leerzeichen darin werden nur als eins gezählt. Dies ist die Grundregel für Browser, mit Leerzeichen umzugehen.

Wenn Sie möchten, dass Leerzeichen so ausgegeben werden, wie sie sind, können Sie das Tag <pre class="brush:php;toolbar:false"></pre> verwenden.

<pre class="brush:php;toolbar:false">◡◡hello◡◡world◡◡

Alternativ können Sie stattdessen die HTML-Entität   verwenden, um Leerzeichen darzustellen.

<p>  hello  world  </p>

2. Leerzeichen

HTML-Regeln für die Verarbeitung von Leerzeichen, anwendbar auf eine Vielzahl von Zeichen. Neben der normalen Leertaste enthält sie auch Tabulatorzeichen (t) und Zeilenumbruchzeichen (r und n).

Der Browser wandelt diese Symbole automatisch in normale Leerzeichen um.

<p>hello
world</p>

Im obigen Code enthält der Text ein Zeilenumbruchzeichen, das vom Browser als Leerzeichen betrachtet wird, und das Ausgabeergebnis ist wie folgt.

hello world

Zeilenumbrüche im Text sind also ungültig (es sei denn, der Text wird innerhalb des <pre class="brush:php;toolbar:false"></pre>-Tags platziert).

<p>hello<br>world</p>

Der obige Code verwendet das Tag <br>, um Zeilenumbrüche explizit anzuzeigen.

3. Das Leerraumattribut von CSS

Die Leerzeichenverarbeitung in der HTML-Sprache ist im Grunde eine direkte Filterung. Eine solche Verarbeitung ist zu grob und ignoriert völlig die Tatsache, dass der Leerraum im Originaltext möglicherweise von Bedeutung ist.

CSS bietet ein white-space-Attribut, das eine präzisere Möglichkeit zum Umgang mit Leerzeichen bieten kann. Dieses Attribut hat insgesamt sechs Werte, mit Ausnahme eines gemeinsamen inherit (vom übergeordneten Element geerbt). Die restlichen fünf Werte werden unten vorgestellt.

3.1 Leerzeichen: normal

white-spaceDer Standardwert des Attributs ist normal, was angibt, dass der Browser Leerzeichen normal verarbeitet.

<p>◡◡hellohellohello◡hello
world
</p>

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

Dann gibt der Container <p></p> eine kleinere Breite an. Zur leichteren Identifizierung ist die Hintergrundfarbe auf Rot eingestellt.

p {
  width: 100px;
  background: red;
}

Der Anzeigeeffekt ist wie folgt.

Wie Sie sehen, werden die Leerzeichen am Anfang des Textes 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.

3.2 Leerzeichen: Nowrap

white-space Wenn das Attribut nowrap ist, erfolgt kein Zeilenumbruch, da die Breite des Containers überschritten wird.

p {
  white-space: nowrap;
}

Der Anzeigeeffekt ist wie folgt.

Der gesamte Text wird als eine Zeile ohne Umbruch angezeigt.

3.3 Leerzeichen: Wenn das pre

white-space-Attribut pre ist, wird es auf die gleiche Weise wie das <pre class="brush:php;toolbar:false"></pre>-Tag verarbeitet.

p {
  white-space: pre;
}

Der Anzeigeeffekt ist wie folgt.

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

3.4 Leerzeichen: Pre-Wrap

white-spaceWenn das Attribut pre-wrap ist, wird es grundsätzlich auf die gleiche Weise wie das <pre class="brush:php;toolbar:false"></pre>-Tag verarbeitet. Der einzige Unterschied besteht darin Wenn die Breite des Containers überschritten wird, kommt es zu einem Zeilenumbruch.

p {
  white-space: pre-wrap;
}

Der Anzeigeeffekt ist wie folgt.

Die führenden Leerzeichen, internen Leerzeichen und Zeilenumbrüche bleiben alle erhalten und Zeilenumbrüche erfolgen außerhalb des Containers.

3.5 Leerzeichen: Vorzeile

white-space Wenn das Attribut pre-line ist, bedeutet dies, dass der Zeilenumbruch beibehalten wird. Bis auf das Newline-Zeichen, das so ausgegeben wird, wie es ist, entspricht alles andere der white-space:normal-Regel.

p {
  white-space: pre-line;
}

Der Anzeigeeffekt ist wie folgt.

Abgesehen davon, dass die Zeilenumbrüche innerhalb des Textes nicht in Leerzeichen umgewandelt werden, stimmen die anderen Verarbeitungsregeln mit normal überein. Dies ist nützlich für Texte vom Typ Poesie.

Empfohlene verwandte Artikel:

div-Tag: Implementierung der horizontalen und vertikalen Zentrierung (mit Code)

Code für die String-Konvertierung mithilfe des text-transform-Attributs in CSS

Das obige ist der detaillierte Inhalt vonUmgang mit Leerzeichen in CSS (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!