Разрыв строки (как <br> ) используя только CSS

Можно ли в чистом CSS, то есть без добавления дополнительных тегов HTML, сделать разрыв строки, как<br>? Я хочу, чтобы разрыв строки после<h4> элемент, но не раньше:

HTML

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

CSS

h4 {
  display: inline;
}

Я нашел много таких вопросов, но всегда с такими ответами"use display: block;"что я не могу сделать, когда<h4> должен оставаться на одной линии.

 Philip Kirkbride07 июн. 2012 г., 16:34
Из нашего любопытства, по какой причине вы не хотите использовать & lt; br / & gt ;?
 Steeven07 июн. 2012 г., 16:45
@ Том, это упрощенный пример. У меня есть сом текст и заголовки в каждом элементе списка.
 Steeven07 июн. 2012 г., 16:43
Причина: у меня очень много элементов списка. И мне также было интересно, существует ли элегантное решение. Обычно нежелательно использовать теги br между элементами (и я вижу заголовок как отдельный элемент)
 user03 дек. 2014 г., 23:35
 toniedzwiedz07 июн. 2012 г., 16:31
Почему этот элемент h4? Почему вы используете его в таком месте, как это?

Ответы на вопрос(3)

::after создать0pxвысотный блок после<h4>, который эффективно перемещает что-либо после<h4> на следующую строку:

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>

Решение Вопроса

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

Пример:http://jsfiddle.net/Bb2d7/

Трюк приходит отсюда:https://stackoverflow.com/a/66000/509752 (чтобы получить больше объяснений)

 04 февр. 2013 г., 22:58
@Alshten, спасибо, имеет смысл & amp; полностью извращает меня в то же время.
 Steeven08 июн. 2012 г., 00:52
Хорошо, спасибо @ JukkaK.Korpela. Тогда почему он не отображается как разрыв строки? Хотя это простое решение, оно все равно переопределяет другие команды пробела.
 07 июн. 2012 г., 18:08
\a означает разрыв строки, символ U + 000A, иwhite-space: pre говорит браузерам обрабатывать это как разрыв строки при рендеринге.
 08 июн. 2012 г., 04:36
@Steeven, он переопределяет только начальное значениеwhite-space на:after псевдоэлемент, который содержит только разрыв строки. И это необходимо, потому что в HTML по умолчанию разрыв строки в содержимом элемента эквивалентен пробелу и не вызывает разрыв строки в отображаемом документе.
 Steeven07 июн. 2012 г., 16:57
Ницца. Что делает \ a?

Пытаться

h4{ display:block;}

в твоем css

http://jsfiddle.net/ZrJP6/

 07 июн. 2012 г., 16:35
Но если я хорошо понимаю, h4 должен быть в той же строке, что и текст раньше. В случае display: block перед h4 есть разрыв строки.
 Steeven07 июн. 2012 г., 16:36
Какие?margin-bottom поместит h4 в ту же строку, что и предыдущий текст?
 07 июн. 2012 г., 16:31
плюс некоторое разумное использованиеmargin-bottom должен доставить тебя туда.

Ваш ответ на вопрос