Heim >Web-Frontend >CSS-Tutorial >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 e03b848252eb9375d56be284e690e873
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 e03b848252eb9375d56be284e690e873
-Tags platziert).
<p>hello<br>world</p>
Der obige Code verwendet das Tag 0c6dc11e160d3b678d68754cc175188a
, 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.
white-space
Der 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 e388a4556c0f65e1904146cc1a846bee
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.
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.
white-space
-Attribut pre
ist, wird es auf die gleiche Weise wie das e03b848252eb9375d56be284e690e873
-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.
white-space
Wenn das Attribut pre-wrap
ist, wird es grundsätzlich auf die gleiche Weise wie das e03b848252eb9375d56be284e690e873
-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.
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!