Können Sie einen Zeilenumbruch nach einem Inline-Element nur mit CSS erzwingen?

Zeilenumbrüche mit CSS erstellen

Können Sie einen Zeilenumbruch nur mit CSS erreichen, ohne HTML-Tags hinzuzufügen? Das Ziel besteht darin, nach einem

-Befehl einen Zeilenumbruch einzufügen. Element, ohne seinen Inline-Status zu beeinflussen.

Lösung:

Um dies zu erreichen, führen Sie die folgenden Schritte aus:

1. Anwenden von display: inline; zum

   Element, um es in der gleichen Zeile zu halten.

2. Erstellen Sie einen Pseudoselektor für

   :after und fügen Sie die folgenden Stile hinzu:

   • Inhalt: "a"; um am Ende von

     ein unsichtbares, geschütztes Leerzeichen einzufügen. element.

   • white-space: pre; um alle führenden Leerzeichen im Text nach dem

   beizubehalten.

Beispiel:

<code class="css">h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}</code>

Von Wenn Sie dieses CSS hinzufügen, wird nach dem

ein Zeilenumbruch angezeigt. Element unter Beibehaltung seines Inline-Anzeigeverhaltens.

Weitere Erläuterungen finden Sie unter: https://stackoverflow.com/a/66000/509752

Das obige ist der detaillierte Inhalt vonKönnen Sie einen Zeilenumbruch nach einem Inline-Element nur mit CSS erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!