So behalten Sie Leerzeichen im Text in HTML bei

In HTML können Sie das Attribut „white-space“ verwenden, um Leerzeichen im Text beizubehalten. Sie müssen lediglich den Stil „white-space:pre|pre-line“ im Element festlegen. Das Attribut „white-space“ gibt an, wie mit Leerzeichen in Elementen während des Layoutprozesses umgegangen wird.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Regeln für Leerzeichen in HTML

Mehrere Leerzeichen im Inhalt in HTML werden im Allgemeinen als eins betrachtet und mehrere aufeinanderfolgende Leerzeichen werden automatisch zusammengeführt. Gleichzeitig werden auch die Leerzeichen vor und nach dem Inhalt wie folgt gelöscht:

<p> fly63   com </p>　

Der Anzeigeeffekt ist:

fly63 com　

Hinweis: Dieser Mechanismus des Browsers gilt auch für Tabulatoren (t) und Zeilenumbrüche ( r und n), was explizit durch die Verwendung des
-Tags ausgedrückt werden kann

Das Whitespace-Attribut legt fest, wie Leerzeichen innerhalb eines Elements behandelt werden.

Dieses Attribut legt fest, wie mit Leerzeichen in Elementen während des Layoutprozesses umgegangen wird. Die Werte pre-wrap und pre-line sind neu in CSS 2.1.

1. Wenn der Wert des Leerraumattributs in CSS pre ist, wird es gemäß dem

-Tag verarbeitet. Der Browser behält Leerzeichen und Zeilenumbrüche im Text bei. Beispiel: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p style="white-space:pre"> fly63  com <p>

Nach dem Login kopieren

Der Anzeigeeffekt ist: „fly63 com“

2 Wenn das Leerzeichenattribut von CSS vor der Zeile steht, bedeutet dies, dass Zeilenumbrüche beibehalten werden . Bis auf das Newline-Zeichen, das so ausgegeben wird, wie es ist, entspricht alles andere der Regel „white-space:normal“.

<p style="white-space: pre-line">
	fly63
	com
</p>

Der Anzeigeeffekt ist:

'fly63

com'

Empfohlenes Lernen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo behalten Sie Leerzeichen im Text in HTML bei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!