box-decoration-break в CSS — оформлення на розриві рядка

HTML

<p><span class="slice">slice: оформлення розрізане<br>разом з елементом</span></p>
<p><span class="clone">clone: кожен фрагмент<br>із власною рамкою</span></p>

CSS

span {
    background: gold;
    border: 2px solid #0172ad;
    border-radius: 8px;
    padding: 2px 8px;
}

.slice { box-decoration-break: slice; }
.clone { box-decoration-break: clone; }

HTML

<div class="info">
	<p>За допомогою властивості <code>box-decoration-break</code> ми можемо стилізувати окремі фрагменти, утворені внаслідок, наприклад, розриву сторінки.</p>
	<p>Нижче розташовані два ідентичні блоки, але фрагменти останнього підтримують всі властивості цілого блоку.</p>
</div>

<div class="wrapper">
	<div class="block"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</span></div>
	<div class="block clone"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</span></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
  line-height: 1.45;
}

.info {
	padding: 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 40%;
	height: 150px;
}

.block span {
	background-color: gold;
	color: #222;
	font-weight: 700;
	padding: 6px 12px;
  line-height: 1.8;
}

.block.clone span {
  -webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>box-decoration-break</strong>.</p>

<p>Вона стилізує окремі фрагменти елементів, утворені внаслідок, наприклад, розриву сторінки.</p>

<div class="inputs">
  <input id="slice" checked name="box-decoration-break" type="radio"/>
  <label for="slice">slice</label>
  <message for="slice">Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення.</message>
  
  <input id="clone" name="box-decoration-break" type="radio"/>
  <label for="clone">clone</label>
  <message for="clone">Фрагменти підтримують всі властивості, які були задані для цілого елементу.</message>
</div>
<div class="message-box">
<p id="message">Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення.</p>
</div>

<p id="block">Це текст. <br> Просто текст для прикладу.</p>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
  line-height: 1.45;
}

#block {
  font-size: 1.75em; 
  padding: 6px 12px;
  background-color: gold;
  display: inline;
}

message {
  display: none;
}

.message-box {
  min-height: 75px;
  margin-bottom: 24px;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('box-decoration-break', this.id));

}));

HTML

<p class="cap">Вбудований елемент через кілька рядків:</p>
<div class="pair">
    <div class="col">
        <span class="mark">довгий підсвічений напис, якому не вистачає одного рядка, тож він переноситься</span>
        <p class="tag">slice — типове</p>
    </div>
    <div class="col">
        <span class="mark clone">довгий підсвічений напис, якому не вистачає одного рядка, тож він переноситься</span>
        <p class="tag">clone</p>
    </div>
</div>

<p class="cap">Те саме з тінню:</p>
<div class="pair">
    <div class="col">
        <span class="sh">напис із тінню, що теж не вміщується в один рядок і переноситься</span>
        <p class="tag">slice — тінь обводить уявну цілу коробку</p>
    </div>
    <div class="col">
        <span class="sh clone">напис із тінню, що теж не вміщується в один рядок і переноситься</span>
        <p class="tag">clone — тінь у кожного шматка</p>
    </div>
</div>

<p class="cap">Блок, розірваний між колонками:</p>
<div class="pair">
    <div class="col">
        <div class="mc"><p class="blk">блок їде через дві колонки: слово слово слово слово слово слово слово слово</p></div>
        <p class="tag">slice — нижньої межі в першій колонці немає</p>
    </div>
    <div class="col">
        <div class="mc"><p class="blk clone">блок їде через дві колонки: слово слово слово слово слово слово слово слово</p></div>
        <p class="tag">clone — межа замкнена в обох</p>
    </div>
</div>

CSS

.cap {
    margin: 20px 0 8px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.pair {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.col {
    width: 260px;
}

.tag {
    margin: 10px 0 0;
    font: .8em/1.35 system-ui, sans-serif;
    color: #5a6472;
}

.mark {
    background: linear-gradient(90deg, #c0392b, #f2b134);
    color: #fff;
    padding: 3px 12px;
    border: 3px solid #2f6fd0;
    border-radius: 12px;
    font: 15px/30px system-ui, sans-serif;
}

.sh {
    background: #eef1f5;
    padding: 3px 10px;
    box-shadow: 0 0 0 4px #c0392b;
    font: 15px/34px system-ui, sans-serif;
}

.clone {
    box-decoration-break: clone;
}

.mc {
    column-count: 2;
    column-gap: 16px;
    column-fill: auto;
    width: 250px;
    height: 74px;
    font: 12px/18px system-ui, sans-serif;
}

.blk {
    margin: 0;
    padding: 4px 8px;
    background: #f2b134;
    border: 3px solid #2f6fd0;
    border-radius: 10px;
}

HTML

<span class="example example0">Приклад<br>роботи<br>без застосування властивості</span>

<br><br><hr><br>

<span class="example example1">Приклад<br>роботи<br>властивості</span>

CSS

.example { 
  
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink, 
    -5px -5px 5px 0px blue, 
    5px 5px 15px 0px yellow;
  
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
  
}

.example1 {
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone; 
}