Wie kann ich Zeilenumbrüche in CSS erstellen, ohne „' zu verwenden?

Erzielen von Zeilenumbrüchen ohne
in CSS

In HTML ist das
-Element wird üblicherweise für Zeilenumbrüche verwendet. Es gibt jedoch Situationen, in denen wir uns alternative Methoden wünschen, um ähnliche Ergebnisse zu erzielen, ohne
zu verwenden.

Beispiel für einen Zeilenumbruch mit

<p>hello <br> How are you</p>

Ausgabe:

hello
How are you

Alternativer Ansatz unter Verwendung CSS

Um Zeilenumbrüche ohne
zu erreichen, können wir die CSS-Eigenschaft white-space: pre verwenden. Diese Eigenschaft repliziert das Verhalten des

 Element, das Leerzeichen, einschließlich Zeilenumbrüche, beibehält.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">p {
  white-space: pre;
}

Nach dem Login kopieren

<p>hello
How are you</p>

Wirkung von Leerzeichen: pre

Die Eigenschaft „white-space: pre“ weist den Browser an um die Leerzeichen wie im HTML geschrieben beizubehalten. In diesem Fall bleiben die Zeilenumbrüche zwischen „Hallo“ und „Wie geht es dir“ erhalten, was zu einem Zeilenumbruch führt.

Ausgabe des alternativen Ansatzes

hello
How are you

Diese Methode bietet eine praktische Möglichkeit, Zeilenumbrüche zu erstellen, ohne dem HTML unnötige Markierungen hinzuzufügen. Dies ist besonders nützlich in Situationen, in denen Zeilenumbrüche gewünscht sind, semantische Elemente wie
sind nicht geeignet.

Das obige ist der detaillierte Inhalt vonWie kann ich Zeilenumbrüche in CSS erstellen, ohne „' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!