<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>

* {
  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;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('box-decoration-break', $(this).attr('id'));
  
});