Zeilenumbruch (wie <br>) nur mit CSS

84

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
1
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
10
\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
3
@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
3
@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
7

Versuchen 

h4{ display:block;}

in deinem css

http://jsfiddle.net/ZrJP6/

Philip Kirkbride
quelle
1
plus eine vernünftige Verwendung von margin-bottomsollte Sie dorthin bringen.
Jeremy Holovacs
4
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
5

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