Свойство box-decoration-break для оформления многострочного текста

Свойство box-decoration-break для оформления многострочного текста

В этой статье мы познакомимся со свойством box-decoration-break и увидим, как оно может воздействовать на строчные элементы, например, помогая аккуратно оформить многострочный текст.

ОТКРЫВАТЬ ЧТО-ТО НОВОЕ В CSS – ЭТО КРУТО

Обожаю узнавать новые CSS свойства, особенно, когда именно они-то мне сейчас и нужны. Недавно я работал над одним проектом, который среди прочего содержал в себе многострочный выделенный текст. Мои требования с точки зрения дизайна были достаточно скромны:

  • текст должен быть выделен, т.е. иметь отличный от фона страницы background color;
  • выделение должно быть только там, где присутствует текст;
  • каждая строка должна иметь небольшие боковые padding, т.е. не должна прилипать к краю цветового фона.

Мой код был примерно таким:

А результат, который я хотел получить, должен был быть примерно таким:
Свойство box-decoration-break
Я хотел найти простое и элегантное решение без использования скриптов или иных костылей. После непродолжительных экспериментов я определил для себя аксиому номер один: элемент, содержащий текст должен иметь

Причины просты:

  • если мой элемент будет inline-block, то нужный мне эффект будет работать до тех пор, пока текст не перенесется на новую строку. Далее это свойство будет растягивать фон на всю ширину родителя.
  • если мой элемент будет block, то нужный мне эффект вообще не будет работать, т.к. это свойство будет растягивать фон на всю ширину родителя с первой же строки.

В обоих случаях мы получим следующий результат:
Свойство box-decoration-break
Так почему бы просто не использовать display: inline, спросите вы. И я отвечу: проблема заключается в достаточно скромном требовании под номером три. А именно: «каждая строка должна иметь небольшие боковые padding, т.е. не должна прилипать к краю цветового фона.»
При обычном использовании display: inline без дополнительных свойств результат будет таким:
Свойство box-decoration-break
Итак, как мы будем решать вставшую проблему? К счастью, CSS умеет немного больше, чем многие могут полагать.

СВОЙСТВО BOX-DECORATION-BREAK

Обратимся к справочнику MDN:

Свойство box-decoration-break определяет как background, padding, margin, border, border-image, box-shadow и clip применяются к элементу, когда он становится фрагментированным. Например, фрагментированным становится инлайновый элемент при переносе строки…

В сущности, это свойство позволяет провести более детализированную настройку отображения инлайнового элемента. Дефолтное значение box-decoration-breakslice. Оно означает, что строчный элемент всегда будет отображаться как нефрагментированный. Представьте, что мы взяли многострочный инлайновый элемент, вытянули его в одну строку, затем применили все нужные нам свойства (padding), далее разрезали эту ленту на части и расставили эти части обратно на строки. В результате мы получим уже знакомую нам картину: padding есть только у начала и конца инлайнового элемента, а у всех остальных строк отступы отсутствуют.
Однако у box-decoration-break есть и второе значение:

Оно-то нам и нужно. Ведь в отличие от значения slice, clone устанавливает, что свойства применяемые к фрагментированному inline элементу, применяются ко всем фрагментам по отдельности, а не к элементу в общем. Т.е. так необходимые нам отступы будут красоваться на каждой без исключения строке нашего многострочного строчного элемента. Также будут вести себя и другие примененные к элементу свойства.

Ссылка на демку, где можно поиграться с box-decoration-break

Поддержка браузерами

Перевод статьи: http://callmenick.com/post/multi-line-padded-text-css-box-decoration-break

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *