Eine kurze Diskussion über Leerzeichen und Leerzeilen im HTML-Code

Alle aufeinanderfolgenden Leerzeichen oder Leerzeilen (Neuzeilen) im HTML-Code werden als einzelnes Leerzeichen angezeigt.

Beispiel 1: (Kontinuierliche Leerzeichen im Textinhalt)

Code

<p>这段文本中，输入连续的空格          大概输入了十个。</p>

Anzeigeeffekt: Zwischen „quadratisch“ und „groß“ befindet sich ein Leerzeichen Raum.

这段文本中，输入连续的空格 大概输入了十个。

Beispiel 2: (Kontinuierliche Leerzeichen zwischen Codes)

Code

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

Anzeigeeffekt: Kontinuierliche Leerzeichen zwischen zwei Span-Elementen, Anzeige Es kommt als heraus Leerzeichen zwischen „sign“ und „和“, es gibt nur ein Leerzeichen.

span是一个行内标签 和前面的span元素之间隔了很多个空格

Die beiden oben genannten Beispiele beweisen, dass fortlaufende Leerzeichen im HTML-Code bei der Anzeige als ein Leerzeichen angezeigt werden und die verbleibenden zusätzlichen Leerzeichen entfernt oder ignoriert werden.

Der Absatztext ist tatsächlich Teil des HTML-Codes, befindet sich jedoch innerhalb des p-Tags und das Leerzeichen in Beispiel 2 befindet sich zwischen den beiden span-Tags.

Verstehen Sie die Leerzeichen, schauen Sie sich jetzt die Leerzeilen an, das Gleiche

Beispiel 3: (Leerzeilen im Textinhalt)

Code

<p>这段文本中，输入连续的空行  
  
  
  
  
  
大概输入了五行。</p>

Anzeigeeffekt: Wie wir sehen können, werden die fünf Leerzeilen im Textcode nur als Leerzeichen angezeigt.

这段文本中，输入连续的空行 大概输入了五行。

Beispiel 4: (Leerzeilen zwischen Elementen/Tags), ersetzen Sie einfach die Leerzeichen in Beispiel 2 durch Leerzeilen. Der Anzeigeeffekt ist der gleiche wie in Beispiel 2, nur mehrzeilige Leerzeilen erscheinen als ein Leerzeichen.

<span>span是一个行内标签</span>  
  
  
  
  
  
<span>和前面的span元素之间隔了很多空行</span>

span是一个行内标签 和前面的span元素之间隔了很多空行

Beweis: Alle aufeinanderfolgenden Leerzeichen oder Leerzeilen (Zeilenumbrüche) im HTML-Code werden als ein Leerzeichen angezeigt.

Was sollten wir in diesem Fall tun, wenn wir den Abstand zwischen zwei Zeichen vergrößern möchten, sodass das Ergebnis fortlaufender Leerzeichen oder Leerzeilen im Code auch fortlaufende Leerzeichen oder Leerzeilen sind? Es ist eigentlich ganz einfach.

Methode 1: Wir können das vorformatierte Tag

 verwenden, unabhängig davon, ob es sich um ein Leerzeichen oder eine leere Zeile handelt. <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">  
这是  
预格式文本。  
它保留了      空格  
和换行。  

Anzeigeeffekt

这是  
预格式文本。  
它保留了      空格  
和换行。

Methode 2: Wir können stattdessen das Leerzeichen verwenden Leerzeichen, leere Zeilen durch Newline-Tags
ersetzen. Obwohl diese Methode den gewünschten Anzeigeeffekt erzielen kann, ist sie für Suchmaschinen nicht besonders benutzerfreundlich, da   und
keine Semantik haben. Es wird daher empfohlen, es so wenig wie möglich zu verwenden. Beachten Sie außerdem, dass   in Kleinbuchstaben geschrieben werden muss und das Semikolon am Ende nicht weggelassen werden darf.

Methode drei: (geeignet für Leerzeichen) Verwenden Sie Leerzeichen in voller Breite.

Leerzeichen in voller Breite werden als chinesische Zeichen interpretiert, daher werden sie nicht als HTML-Trennzeichen interpretiert . Sie können die tatsächliche Anzahl der Leerzeichen verfolgen.

Frage: Wie verwende ich die Eingabemethode in voller Breite?

Nehmen Sie die Sogou-Eingabemethode als Beispiel. Wenn in der Statusleiste ein Mondsymbol angezeigt wird, bedeutet dies, dass es sich um ein Sonnensymbol handelt Dies bedeutet, dass die Eingabe halber Breite verwendet wird. Es handelt sich um eine Eingabe voller Breite. Sie können zwischen voller und halber Breite wechseln, indem Sie auf das Symbol klicken oder die Tastenkombination Umschalt+Leertaste drücken.

Halbwinkeleingabe (Mond) Vollwinkeleingabe (Sonne)

Methode 4: Verwenden Sie CSS-Stile, um die Attribute im Wortintervall in zu steuern den CSS-Stil ändern. Wir wissen, dass zwei Wörter im Englischen durch ein Leerzeichen getrennt sind, sodass wir uns visuell vorstellen können, dass Wortabstände die Breite des Abstands zwischen Wörtern verändern (verlängern oder verkürzen).

Methode 5: Verwenden Sie das Whitespace-Attribut im CSS-Stil. Dieses Attribut legt fest, wie mit Whitespace-Zeichen innerhalb des Elements umgegangen wird.

white-space:normal; es ist dasselbe, als würde es nicht für aufeinanderfolgende Leerzeichen und Leerzeilen angezeigt.

white-space:nowrap; Was bedeutet nicht umbrechen? Unter normalen Umständen wird der Text automatisch umgebrochen, wenn er das Textfeld überschreitet. Diese Einstellung bedeutet, dass er nicht automatisch umgebrochen wird, sondern umgebrochen wird, wenn er auf das Zeilenumbruch-Tag

trifft white-space:pre; Identisch mit Methode 1, geben Sie den Text so aus, wie er ist. Wenn der Text den Textbereich überschreitet, wird er nicht umbrochen und es werden keine Bildlaufleisten generiert.

white-space:pre-wrap; Behalten Sie Leerzeichen und Leerzeilen bei, aber wenn der Text das Textfeld überschreitet, wird er automatisch umgebrochen.

white-space:pre-line; Fortlaufende Leerzeichen werden als ein Leerzeichen angezeigt, fortlaufende Leerzeilen bleiben jedoch erhalten.

Das Obige ist die kurze Diskussion über Leerzeichen und Leerzeilen im HTML-Code, die Ihnen der Herausgeber präsentiert hat. Ich hoffe, Sie werden die chinesische PHP-Website unterstützen~

Mehr über die kurze Diskussion über Leerzeichen und Leerzeilen im HTML-Code. Für Artikel zu Leerzeichen und Leerzeilen beachten Sie bitte die chinesische PHP-Website!