Łamanie linii (jak) przy użyciu tylko css

Czy jest możliwe w czystym css, czyli bez dodawania dodatkowych znaczników html, aby zrobić podział linii jak <br>? Chcę, aby linia została przerwana po elemencie <h4>, ale nie przed:

HTML 

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

CSS 

h4 {
  display: inline;
}

Znalazłem wiele takich pytań, ale zawsze z odpowiedziami typu "use display: block;" , których nie mogę zrobić, gdy <h4> musi pozostać w tej samej linii.

Author: Steeven, 2012-06-07
Source

3 answers

To działa tak: 

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

Przykład: http://jsfiddle.net/Bb2d7/

Sztuczka pochodzi stąd: https://stackoverflow.com/a/66000/509752 (aby mieć więcej wyjaśnień)

 120
Author: adriantoine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:25:36

Try 

h4{ display:block;}

W Twoim css

Http://jsfiddle.net/ZrJP6/

 4
Author: Philip Kirkbride,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 14:30:24

Możesz użyć ::after aby utworzyć blok 0px-height po <h4>, który skutecznie przesuwa cokolwiek po <h4> do następnej linii: 

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>
 2
Author: 0b10011,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 20:05:04