Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

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

Beispiel 1: (Durchgehende Leerzeichen im Textinhalt)

Code

Beispiel 2: (durchgehende Leerzeichen zwischen den Codes)

Code

Die beiden obigen Beispiele beweisen, dass aufeinanderfolgende Leerzeichen im HTML-Code bei der Anzeige als ein Leerzeichen dargestellt werden und die verbleibenden redundanten Leerzeichen entfernt oder ignoriert werden.

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

Nachdem wir nun Leerzeichen kennen, schauen wir uns Leerzeilen an.

Beispiel 3: (Leerzeile im Textinhalt)

Code

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

Was müssen wir in diesem Fall tun, wenn wir den Abstand zwischen zwei Zeichen vergrößern möchten, sodass aufeinanderfolgende Leerzeichen oder Leerzeilen im Code auch als aufeinanderfolgende Leerzeichen oder Leerzeilen angezeigt werden? Eigentlich ist es ganz einfach.

Methode 1: Wir können das Vorformatierungs-Tag <pre> verwenden, das sowohl auf Leerzeichen als auch auf Leerzeilen anwendbar ist.

Methode 2: Wir können Leerzeichen durch das Leerzeichen &nbsp; und Leerzeilen durch das Zeilenumbruch-Tag <br/> ersetzen. Obwohl mit dieser Methode der gewünschte Anzeigeeffekt erzielt werden kann, handelt es sich dabei nicht um die suchmaschinenfreundlichste Methode, da &nbsp; und <br/> in HTML keine Semantik besitzen. Es wird daher empfohlen, es so wenig wie möglich zu verwenden. Beachten Sie auch, dass &nbsp; klein geschrieben sein muss und das letzte Semikolon nicht weggelassen werden kann.

Methode 3: (Abstände anpassen) Verwenden Sie Abstände in voller Breite

Vollbreite Leerzeichen werden als chinesische Schriftzeichen interpretiert, daher werden sie nicht als HTML-Trennzeichen interpretiert und können entsprechend der tatsächlichen Anzahl der Leerzeichen angezeigt werden.

Frage: Wie verwende ich die Eingabemethode mit voller Breite?

Am Beispiel der Sogou-Eingabemethode verwenden wir normalerweise die Eingabe mit halber Breite. Wenn in der Statusleiste ein Mondsymbol angezeigt wird, bedeutet dies, dass die Eingabe mit halber Breite verwendet wird. Wenn es ein Sonnensymbol ist, bedeutet dies, dass die Eingabe mit voller Breite verwendet wird. Sie können zwischen voller und halber Breite wechseln, indem Sie auf das Symbol klicken oder die Tastenkombination Umschalt+Leertaste (Leerzeichen) verwenden.

Eingabe in halber Breite (Mond) Eingabe in voller Breite (Sonne)

Methode 4: Verwenden Sie die Wortabstandseigenschaft im CSS-Stil, um die Wortabstandseigenschaft in CSS zu steuern. Die Wortabstandseigenschaft in CSS kann den Standardabstand zwischen Zeichen (Wörtern) ändern. Wir wissen, dass im Englischen zwei Wörter durch Leerzeichen getrennt sind. Wir können es uns daher bildlich folgendermaßen vorstellen: Der Wortabstand ändert (verlängert oder verkürzt) die Breite des Zwischenraums zwischen Wörtern.

Methode 5: Verwenden Sie die Eigenschaft „whitespace“ im CSS-Stil. Diese Eigenschaft gibt an , wie mit Leerzeichen innerhalb eines Elements umgegangen wird.

white-space:normal; ist normal, genauso wie es nicht festgelegt ist, aufeinanderfolgende Leerzeichen und Leerzeilen zeigen nur ein Leerzeichen an.

white-space:nowrap; Was bedeutet „kein Umbruch“? Normalerweise wird der Text automatisch umbrochen, wenn er den Textbereich überschreitet. Diese Einstellung bedeutet, dass der Text nicht automatisch umbrochen wird, sondern nur, wenn er auf ein Zeilenumbruch-Tag trifft<br />

white-space:pre; Wie bei Methode 1 wird der Text so ausgegeben und angezeigt, wie er ist. Wenn der Text den Textbereich überschreitet, erfolgt kein Zeilenumbruch und es wird eine Bildlaufleiste generiert.

white-space:pre-wrap; behält Leerzeichen und Leerzeilen bei, umbricht den Text aber automatisch, wenn er den Textbereich überschreitet.

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

Das Obige ist der gesamte Inhalt der kurzen Diskussion des Herausgebers zu Leerzeichen und Leerzeilen im HTML-Code. Ich hoffe, jeder wird 123WORDPRESS.COM unterstützen~

Original-URL: http://www.cnblogs.com/web-HCJ/p/4543093.html