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.

<p>1. Leerzeichenregeln

<p>Leerzeichen im HTML-Code werden normalerweise von Browsern ignoriert.

<p>

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

<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.

<p>Die Browserausgabe ist wie folgt.

hello world

<p>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.

<p>Wenn Sie möchten, dass Leerzeichen so ausgegeben werden, wie sie sind, können Sie das Tag <pre class="brush:php;toolbar:false">&lt;/code&gt; verwenden. &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;◡◡hello◡◡world◡◡</pre></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Alternativ können Sie stattdessen die HTML-Entität <code> verwenden, um Leerzeichen darzustellen.

<p>  hello  world  </p>

<p>2. Leerzeichen

<p>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).

<p>Der Browser wandelt diese Symbole automatisch in normale Leerzeichen um.

<p>hello
world</p>

<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

<p>Zeilenumbrüche im Text sind also ungültig (es sei denn, der Text wird innerhalb des <pre class="brush:php;toolbar:false">&lt;/code&gt;-Tags platziert). &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;p&gt;hello&lt;br&gt;world&lt;/p&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Der obige Code verwendet das Tag <code><br>, um Zeilenumbrüche explizit anzuzeigen.

<p>3. Das Leerraumattribut von CSS

<p>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.

<p>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

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

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

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

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

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

<p>Der Anzeigeeffekt ist wie folgt.

<p>

<p>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

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

p {
  white-space: nowrap;
}

<p>Der Anzeigeeffekt ist wie folgt.

<p>

<p>Der gesamte Text wird als eine Zeile ohne Umbruch angezeigt.

3.3 Leerzeichen: Wenn das pre

<p>white-space-Attribut pre ist, wird es auf die gleiche Weise wie das

</code>-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

<p>Der Anzeigeeffekt ist wie folgt.

<p>

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

3.4 Leerzeichen: Pre-Wrap

<p>white-spaceWenn das Attribut pre-wrap ist, wird es grundsätzlich auf die gleiche Weise wie das

</code>-Tag verarbeitet. Der einzige Unterschied besteht darin Wenn die Breite des Containers überschritten wird, kommt es zu einem Zeilenumbruch. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
  white-space: pre-wrap;
}

Nach dem Login kopieren