Вставляем разрыв строки

<h1 class=”one”> 
Break right after this

<!-— <br> мог бы быть здесь, но сможем ли мы имитировать его при помощи CSS? -->
<span>
and before this
</span>
</h1>

На это способны блочные элементы

Вместо span мы можем использовать div и мы получим разрыв просто потому что div — блочный элемент.

Разрыв строки через псевдоэлемент

Это просто:

h1 span::before { 
content: “\A”;
}
h1.two span::before { 
content: “\A”; white-space: pre;
}
box-decoration-break иногда пригождается, но не в нашем случае

Немного странности: текст с псевдоэлементом

Это была идея Aaron Bushnell. Трюк заключается в том, чтобы сделать span блочным элементом, но затем ввести текст с псевдоэлементом и стилизовать его как строчный элемент.

h1 span { 
display: block;
}
h1 span::before {
content: attr(data-text);
background: black;
padding: 1px 8px;
}
Сработало! Но…

Эксплуатируем табличную раскладку

Моя любимая идея пришла от Thierry Koblentz. Просто напишите span display: table; и все готово. Это не табличные данные конечно, но это и не важно. Возможность придать элементу табличный вид через CSS — это вопрос использования уникальных свойств этого вида в своих целях, а не вопрос семантики.

h1 span { 
display: table;
}

Живые примеры

В том числе и с простым br, который прекрасен сам по себе.

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

3.6K Followers

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC