Wie erreicht man Zeilenumbrüche in CSS ohne HTML-Tags?

CSS-Zeilenumbrüche ohne HTML-Tags

Zeilenumbrüche ausschließlich mit CSS zu erreichen, ohne zusätzliche HTML-Elemente einzuführen, kann mit der folgenden Methode erreicht werden :

Problem:

In einer Aufzählungsliste möchten Sie nach einem

einen Zeilenumbruch haben. Element, jedoch nicht vorher, wobei das

auf der gleichen Linie. Herkömmliche Lösungen empfehlen die Einstellung display: block; für

, aber dies unterbricht die Inline-Natur des Elements.

CSS-Lösung:

Die Lösung liegt in der Verwendung von CSS-Pseudoelementen, um a einzuführen Zeilenumbruch. Hier ist der CSS-Code:

h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}

Erklärung:

• Anzeige: inline; hält das

  in derselben Zeile wie anderer Text.

• h4:after erstellt ein Pseudoelement nach dem

  Element.

• Inhalt: „a“; fügt ein Zeilenumbruchzeichen in das Pseudoelement ein.
• white-space: pre; behält den Zeilenumbruch bei.

Demo:

Ein Beispiel für diese Technik finden Sie hier: http://jsfiddle.net/Bb2d7/

Ursprung:

Die Inspiration für diesen Trick kam von dieser StackOverflow-Antwort: https://stackoverflow.com/a/66000/509752

Das obige ist der detaillierte Inhalt vonWie erreicht man Zeilenumbrüche in CSS ohne HTML-Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!