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

Zeilenumbrüche mit CSS erstellen

Sie benötigen einen Zeilenumbruch, möchten aber keine zusätzlichen HTML-Tags hinzufügen? CSS ist für Sie da! So erreichen Sie einen Zeilenumbruch nach einem bestimmten Element wie einem

:

Frage:

Können Sie einen Zeilenumbruch nach einem Element nur mit CSS erzwingen? , ohne HTML-Tags hinzuzufügen?

Herausforderung:

Angenommen, wir haben ein

Element eingebettet in ein

:

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

Wir wollen einen Zeilenumbruch nach dem

aber nicht vorher, während es inline bleibt. Die Einstellung display: block; ist keine Option, da es die Positionierung des Elements stören würde.

Lösung:

Mit etwas cleverem CSS können wir Folgendes erreichen:

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

Erklärung:

• Anzeige: inline; hält das

  Element in derselben Zeile.

• h4:after erstellt ein Pseudoelement nach dem

  und fügt das Unicode-Zeichen „a“ (Zeilenumbruch) ein.

• white-space: pre; sorgt dafür, dass der eingefügte Zeilenumbruch sichtbar ist.

Beispiel:

Schauen Sie sich diese Geige für eine Live-Demo an: http://jsfiddle.net/Bb2d7 /

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