Wie erstelle ich reine CSS-Zeilenumbrüche ohne „'?

Nur ​​CSS-Zeilenumbrüche: Mehr als

Die Herausforderung, Zeilenumbrüche in reinem CSS zu erstellen, ohne zusätzliche HTML-Tags einzuführen, hat zugenommen verwirrte Entwickler. Dies ist besonders relevant, wenn der Zeilenumbruch nach einem bestimmten Element, z. B. einem

, gewünscht ist und gleichzeitig die Inline-Ausrichtung des Elements beibehalten werden soll.

Die CSS-Lösung

Glücklicherweise können Sie diesen gewünschten Effekt mit einem cleveren CSS-Workaround erzielen. Durch die Nutzung der display: inline-Eigenschaft und die Bearbeitung der Inhalts- und Leerraumeigenschaften des Elements können Sie einen Zeilenumbruch speziell nach dem Zielelement induzieren.

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

In diesem Code die display: inline-Eigenschaft sorgt dafür, dass

Element bleibt in der gleichen Zeile. Der Schlüssel zum Zeilenumbruch liegt im Pseudoelement :after. Indem Sie seinen Inhalt auf das ASCII-Zeichen a setzen, das einen Zeilenvorschub darstellt, und seinen Leerraum auf pre setzen, erzwingen Sie einen Zeilenumbruch nach dem

.

Beispiel in Aktion

Betrachten Sie den folgenden HTML-Code:

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

Das Anwenden des oben genannten CSS auf diesen HTML-Code führt zu einem Zeilenumbruch erst nach dem

Element unter Beibehaltung seiner Inline-Positionierung:

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

Fazit

Diese CSS-Technik bietet eine zuverlässige Möglichkeit, Zeilenumbrüche in reinem CSS zu implementieren, auch nach Inline-Elementen. Es bietet eine wünschenswerte Lösung für Szenarien, in denen HTML-Änderungen nicht möglich sind.

Das obige ist der detaillierte Inhalt vonWie erstelle ich reine CSS-Zeilenumbrüche ohne „'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!