HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут box-decoration-break в CSS

Атрибут box-decoration-break в CSS

327

Вказує Як оформляти фрагмент тексту при його перенесенні на інший рядок Працює лише для таких властивостей: background, border, border-image, box-shadow, clip-path, margin та padding.

Коротка інформація

Значення за замовчуванням slice
Успадковується Ні
Застосовується До всіх елементів
Анімується Ні

Синтаксис 

<code>box-decoration-break: slice | clone

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

slice
Кожен фрагмент розрізається в місці перенесення і жодних ефектів оформлення на місці «розрізу» не відображається. Зокрема, межа не показується, тінь не виводиться, радіус заокруглення працює тільки для всього блоку.
clone
Кожен фрагмент оформляється незалежно. До всіх фрагментів окремо застосовується рамка, тінь, фон та ін.
type-text-long field-label-above">

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, бо в цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
-tablet is-6-desktop playground-values"> 
span { border: 1px solid #86af61; padding: 2px 4px; border-radius:10px box-shadow: 0 0 5px rgba(0,0,0,.5); box-decoration-break: <span class="playground-active">{{ playgroundValue }}</span>;-webkit-box-decoration-break: <span class="playground-active">{{playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-decoration-break</title> <style> a { background: #fffdeb; /* Колір тла */
text-decoration: none; /* Забираємо підкреслення */
border: 1px solid #86af61; /* Параметри рамки */
padding: 0 4px; /* Поля */
box-shadow: 0 0 5px rgba(0,0,0,.5); /* Тінь */
box-decoration-break: clone; /* Переносимо оформлення */
-webkit-box-decoration-break: clone; }
</style>
</head>
<body> <p>Для складання мегадроїда потрібно відкрити коробку, дістати мішечок з мікросхемами і скласти їх у потрібному порядку, <a href="page/help.html">користуючись нашим докладним 8631-сторінковим керівництвом<. ;/p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Перенесення оформлення тексту на інший рядок

Об'єктна модель

Об'єкт .style.boxDecorationBreak

Примітка

Браузери Edge, Chrome, Opera, Safari підтримують властивість -webkit-box-decoration-break.

Специфікація

Специфікація Статус
CSS Fragmentation Module Level 4 Робочий проект
CSS Fragmentation Module Level 3 Можлива рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

79 22 15 6.1 32
4.4 68 46 7

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, н наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації. modal>

© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS