Когда элементы HTML переносятся на следующую строку, они отобразятся довольно предсказуемо: подчеркнутый текст останется подчеркнутым, независимо от того, все ли слова расположены на одной строке или они разбиты на несколько строк. Но так как на сайтах используется все больше кода CSS и оформления, становится сложным точно знать заранее, какой эффект будут создавать разные стили, применяемые к элементам, в таких ситуациях, особенно при сужении окна браузера. Например следующая разметка:

<h1>Don’t forget to take your soma</h1>

Со следующим объявлением стилей CSS:

h1 {
    padding: 2rem;
    border-radius: 4rem;
    border: 5px double #fff;
    background: #111;
    color: #fff;
    text-align: center;
}

Создаст вот такой эффект при сужении окна браузера:

Текст заголовка с оформлением, разбитый на несколько строк

Как Вы видите, свойство закругления рамки распространяется на текст, находящийся на обеих строках. Но это происходит у блочных элементов. А что случится, если мы применим тот же эффект к строчному элементу, такому как элемент <span>?

<p>The robot said <span>Don’t forget to take your soma</span>

С подобным кодом CSS:

span {
    border-radius: 2rem;
    border: 1px solid;
    padding: 0 1rem;
}

Если прямая речь разбивается на две строки, получается такой результат:

Строчный текст с оформлением, разбитый на несколько строк

Это может подходить для Вашего дизайна, но в некоторых ситуациях это может выглядеть очень странно. Возможно добиться другого результата, если добавить свойство переноса оформления блока со значением clone (клонирования):

span {
    box-decoration-break: clone
}

Как можно предположить из названия, значение клонирование повторяет визуальный эффект для всех строк, на которых расположен элемент, разбивая оформление на части и применяя к каждой из них один и тот же эффект:

Строчный текст с оформлением, разбитый на несколько строк, с применением значения клонирования

Другое значение этого свойства -  slice — представляет собой поведение строчного элемента по умолчанию.

На практическом уровне свойство переноса оформления блока нужно всего для нескольких видов оформления строчных элементов: закругления рамки, изображения рамки и тени блока. Обратите внимание, что разбивание текста на отдельные части может означать, что любое фоновое изображение, примененное к тексту, может повторяться, несмотря на задание свойства background-repeat: no-repeat.

Применение

Поддержка свойства box-decoration-break удивительно широкая: у браузера Firefox она просто отлична, но обратите внимание, что на данный момент по-прежнему нужна приставка производителя для браузеров на движке Webkit и для браузеров Chrome и Opera, а также у всех этих браузеров это свойство не работает на разрывах колонок и страниц. К сожалению, это свойство все еще не поддерживается в браузерах Internet Explorer и Edge.

Заключение

Хотя область применения свойства переноса оформления блока довольно небольшая, в некоторых ситуациях оно может очень помочь, особенно при создании адаптивных страниц, и оно заслуживает место в арсенале каждого веб-разработчика.

За дополнительной информацией и примерами использования можно обратиться к уроку на сайте CSS Tricks, написанному Marie Mosley, и спецификации.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: