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

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

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

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

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

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

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

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

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

h1 span { 
display: table;
}

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

--

--

--

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 (±∞)

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

More from Medium

How to bake croissants using JavaScript? Three inspiring talks from the conference Devs for Ukraine

Tailwind CSS — Add fonts form your local

Centering a div made easy with Tailwind CSS

Centering a div made easy with Tailwind CSS

What the glitch