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

3 min readMay 31, 2016

Иногда я попадал в ситуации, когда есть заголовок с вложенным 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;, но… это только увеличит кусок на первой строке.

box-decoration-break иногда пригождается, но не в нашем случае

Если мы сделаем 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.