Разрыв строки (например, <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;
}

Я нашел много подобных вопросов, но всегда с ответами типа «использовать дисплей: блок;» , чего я не могу сделать, когда <h4>должен оставаться на одной линии.

html css styling

— Стивен
источник

Почему это элемент h4? Почему вы используете его в таком месте?

— toniedzwiedz 07

Наше любопытство, по какой причине вы не хотите использовать <br/>?

— Филип Киркбрайд

Причина: у меня очень много элементов списка. И еще мне было интересно, существует ли элегантное решение. Обычно нехорошо использовать теги br между элементами (и я вижу заголовок как отдельный элемент)

— Стивен,

@Tom, это упрощенный пример. У меня есть текст и заголовки в каждом элементе списка.

— Стивен, 07

возможный дубликат Как вставить разрыв строки перед элементом с помощью CSS

— пользователь

Ответы:

135

Это работает так:

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

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

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

— адриантоин
источник

\aозначает разрыв строки, символ U + 000A, и white-space: preуказывает браузерам рассматривать его как разрыв строки при рендеринге.

— Юкка К. Корпела

Хорошо, спасибо @ JukkaK.Korpela. Тогда почему он вообще не отображается как разрыв строки? Хотя это решение простое, оно по-прежнему отменяет другие команды с пробелами.

— Steeven 07

@Steeven, она перекрывает только начальное значение white-spaceна :afterпсевдо-элемента, который содержит только разрыв строки. И это необходимо, потому что в HTML по умолчанию разрыв строки в содержимом элемента эквивалентен пробелу и не вызывает разрыв строки в визуализированном документе.

— Jukka K. Korpela

@Alshten, спасибо, это имеет смысл и в то же время меня полностью пугает.

— sonjz

Никогда бы не подумал об этом. Жаль, что нельзя вставить HTML!

— Lodewijk

Пытаться

h4{ display:block;}

в вашем css

http://jsfiddle.net/ZrJP6/

— Филип Киркбрайд
источник

плюс разумное использование margin-bottomдолжно привести вас туда.

— Джереми Головач 07

Но если я хорошо понимаю, h4 должен быть на той же строке, что и предыдущий текст. В display: block перед h4 есть разрыв строки.

— Адриантоин 07

Какая? margin-bottomпоместит h4 в ту же строку, что и предыдущий текст?

— Стивен, 07

!! Это не рабочее решение: ваша строка после будет «display: none» в таких браузерах, как Safari !!

— Грегдебрик

Вы можете использовать ::afterдля создания 0pxблока -height после <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>

Развернуть фрагмент

— 0b10011
источник