Zeilenumbruch (wie <br>) nur mit CSS

Ist es in reinem CSS möglich, ohne zusätzliche HTML-Tags hinzuzufügen, einen Zeilenumbruch wie <br>? Ich möchte den Zeilenumbruch nach dem <h4>Element, aber nicht vorher:

HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

CSS

h4 {
  display: inline;
}

Ich habe viele Fragen wie diese gefunden, aber immer mit Antworten wie "use display: block;" , was ich nicht kann, wenn das <h4>auf der gleichen Linie bleiben muss.

html css styling

— Steeven
quelle

Warum ist dieses Element ein h4? Warum benutzt du es an einem Ort wie diesem?

— toniedzwiedz

Unsere Neugier, was ist der Grund, warum Sie <br/> nicht verwenden möchten?

— Philip Kirkbride

Der Grund: Ich habe sehr viele Listenelemente. Und ich habe mich auch gefragt, ob es eine elegante Lösung gibt. Es ist normalerweise nicht schön, br-Tags zwischen Elementen zu verwenden (und ich sehe den Header als ein eigenes Element)

— Steeven

@ Tom, dies ist ein vereinfachtes Beispiel. Ich habe etwas Text und Überschriften in jedem Listenelement.

— Steeven

Mögliches Duplikat von Einfügen eines Zeilenumbruchs vor einem Element mit CSS

— Benutzer

Antworten:

134

Es funktioniert so:

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

Beispiel: http://jsfiddle.net/Bb2d7/

Der Trick kommt von hier: https://stackoverflow.com/a/66000/509752 (um weitere Erklärungen zu erhalten)

— adriantoine
quelle

\abedeutet Zeilenumbruch, Zeichen U + 000A, und white-space: preweist die Browser an, ihn beim Rendern als Zeilenumbruch zu behandeln.

— Jukka K. Korpela

Okay, danke @ JukkaK.Korpela. Warum wird es dann überhaupt nicht als Zeilenumbruch gerendert? Obwohl diese Lösung einfach ist, werden andere Leerraumbefehle überschrieben.

— Steeven

@Steeven überschreibt nur den Anfangswert für white-spacedas Pseudoelement, :afterdas nur den Zeilenumbruch enthält. Dies ist erforderlich, da in HTML ein Zeilenumbruch im Elementinhalt standardmäßig einem Leerzeichen entspricht und keinen Zeilenumbruch im gerenderten Dokument verursacht.

— Jukka K. Korpela

@Alshten, danke, macht Sinn und macht mich gleichzeitig total verrückt.

— Sonjz

Hätte nie daran gedacht. Schade, dass man kein HTML einfügen kann!

— Lodewijk

Versuchen

h4{ display:block;}

in deinem css

http://jsfiddle.net/ZrJP6/

— Philip Kirkbride
quelle

plus eine vernünftige Verwendung von margin-bottomsollte Sie dorthin bringen.

— Jeremy Holovacs

Aber wenn ich es gut verstehe, muss sich das h4 in derselben Zeile wie der vorherige Text befinden. Mit display: block gibt es einen Zeilenumbruch vor dem h4.

— Adriantoine

Was? margin-bottomwird das h4 in die gleiche Zeile wie der vorhergehende Text gesetzt?

— Steeven

!! Dies ist keine funktionierende Lösung: Ihre Zeile danach wird in Browsern wie Safari "display: none" sein !!

— Gregdebrick

Sie können verwenden ::after, um einen 0px-height-Block nach dem zu erstellen <h4>, der effektiv alles nach dem <h4>in die nächste Zeile verschiebt:

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>

Erweitern Sie das Snippet

— 0b10011
quelle