Свойство box-decoration-break
Описание
Указывает, как оформлять фрагменты текста при его переносе на другую строку. Работает только для свойств: background, border, border-image, box-shadow, clip-path, margin и padding.
Синтаксис
box-decoration-break: slice | clone;| Значение | Описание |
| slice | Каждый фрагмент разрезается в месте переноса и эффекты оформления на месте разреза отключаются. |
| clone | Каждый фрагмент оформляется независимо. Ко всем фрагментам отдельно применяется рамка, тень, фон и др. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
border: 1.4px solid #c8ff00;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 50px;
-webkit-box-decoration-break: clone;
}
#div-d {
width: 200px;
border: 3px solid black;
padding: 10px;
}
</style>
<div id='div-d'>
<span id='test'>Далеко-далеко за словесными горами в стране.</span>
</div>
</body>
</html>
Далеко-далеко за словесными горами в стране.
Читайте также
Свойство border
Универсальное свойство позволяет одновременно установить толщину, стиль и цвет границы вокруг эле...
Свойство overflow
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за ...
Стиль первого элемента определенного типа
Псевдокласс задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих...
Свойство column-span
Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колон...
Стили к элементам на основе нумерации
Псевдокласс :nth-child задаёт правила стилей для элементов, которые не содержат указанный селектор.