Разрыв строки (например, <br>) с использованием только css

85

Возможно ли в чистом 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/>?
Филип Киркбрайд
1
Причина: у меня очень много элементов списка. И еще мне было интересно, существует ли элегантное решение. Обычно нехорошо использовать теги 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 (чтобы получить больше объяснений)

адриантоин
источник
10
\aозначает разрыв строки, символ U + 000A, и white-space: preуказывает браузерам рассматривать его как разрыв строки при рендеринге.
Юкка К. Корпела
Хорошо, спасибо @ JukkaK.Korpela. Тогда почему он вообще не отображается как разрыв строки? Хотя это решение простое, оно по-прежнему отменяет другие команды с пробелами.
Steeven 07
3
@Steeven, она перекрывает только начальное значение white-spaceна :afterпсевдо-элемента, который содержит только разрыв строки. И это необходимо, потому что в HTML по умолчанию разрыв строки в содержимом элемента эквивалентен пробелу и не вызывает разрыв строки в визуализированном документе.
Jukka K. Korpela
3
@Alshten, спасибо, это имеет смысл и в то же время меня полностью пугает.
sonjz
Никогда бы не подумал об этом. Жаль, что нельзя вставить HTML!
Lodewijk
7

Пытаться 

h4{ display:block;}

в вашем css

http://jsfiddle.net/ZrJP6/

Филип Киркбрайд
источник
1
плюс разумное использование margin-bottomдолжно привести вас туда.
Джереми Головач 07
4
Но если я хорошо понимаю, h4 должен быть на той же строке, что и предыдущий текст. В display: block перед h4 есть разрыв строки.
Адриантоин 07
Какая? margin-bottomпоместит h4 в ту же строку, что и предыдущий текст?
Стивен, 07
!! Это не рабочее решение: ваша строка после будет «display: none» в таких браузерах, как Safari !!
Грегдебрик
5

Вы можете использовать ::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
источник