Вставляем разрыв строки
Иногда я попадал в ситуации, когда есть заголовок с вложенным span. Я хочу быть уверен, что разрыв строки будет перед span. Для записи: нет ничего постыдного в том, чтобы использовать br в такой ситуации (и по факту возможность показывать или прятать его делает этот способ очень действенным). Но…это всегда вызывает небольшой дискомфорт — почему я вынужден использовать html для достижения целей, которые поставлены перед раскладкой.
Поэтому давайте совершим путешествие. Путешествие с большим количеством “Но”.
<h1 class=”one”>
Break right after this
<!-— <br> мог бы быть здесь, но сможем ли мы имитировать его при помощи CSS? --> <span>
and before this
</span>
</h1>
На это способны блочные элементы
Вместо span мы можем использовать div и мы получим разрыв просто потому что div — блочный элемент.
Но мы использовали span целенаправленно. Текст после переноса строки должен быть строчным (inline)/блочно-строчным (inline-block). У него должны быть внутренние отступы, фон и все в этом духе.
Разрыв строки через псевдоэлемент
Это просто:
h1 span::before {
content: “\A”;
}
Но… span — строчный элемент. Разрыв строки не сработает! Как и настоящий разрыв ни на что не повлияет.
Мы можем заставить заработать этот разрыв строки, добавив смысла пробелам…
h1.two span::before {
content: “\A”; white-space: pre;
}
Вообще-то это сработало. Но…кусочек внутреннего отступа и фона остаются на первой строке когда строка переносится:
Мы можем починить это нелепое поведение при помощи box-decoration-break: clone;, но… это только увеличит кусок на первой строке.
Если мы сделаем span блочно-строчным, то разрыв строки будет происходить внутри него. А это точно не то, что мы хотели:
Сделать псевдоэлемент блочным и оставить span в покое? Тоже не сработает:
Немного странности: текст с псевдоэлементом
Это была идея Aaron Bushnell. Трюк заключается в том, чтобы сделать span блочным элементом, но затем ввести текст с псевдоэлементом и стилизовать его как строчный элемент.
h1 span {
display: block;
} h1 span::before {
content: attr(data-text);
background: black;
padding: 1px 8px;
}
Я долго был поклонником трюка с псевдоэлементом, но это выглядит опасно, поскольку любые изменения будут болезненными. Некоторые из программ экранного чтения читают псевдоэлементы, но вроде бы не все. Они и не должны! Не говоря уже о том, что вы не можете скопировать текст и вставить его в таком же виде. По крайней мере текст по прежнему только в HTML!
Эксплуатируем табличную раскладку
Моя любимая идея пришла от Thierry Koblentz. Просто напишите span display: table; и все готово. Это не табличные данные конечно, но это и не важно. Возможность придать элементу табличный вид через CSS — это вопрос использования уникальных свойств этого вида в своих целях, а не вопрос семантики.
h1 span {
display: table;
}
Живые примеры
В том числе и с простым br, который прекрасен сам по себе.
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Перевод статьи Injecting a Line Break от Chris Coyier.