ь</p><p>Вибери потрібне значення для <code>break-inside</code>:</p>

<p><strong>Ця властивість може не підтримуватися Вашим браузером!</strong></p>

<p><em>В якості значень для властивості Ви можете використовувати auto i avoid - дві властивості, що підтримуються більшістю з браузерів та відповідють останній специфікації CSS.</em></p>

<div class="inputs">
  <input id="auto" checked name="break-inside" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Ні вказує, ні забороняє переривання сторінки або стовпця.</message>
  
  <input id="avoid" name="break-inside" type="radio"/>
  <label for="avoid">avoid</label>
  <message for="avoid">Уникання переривання сторінки після основного контейнера.</message>
</div>

<p id="message">Ні вказує, ні забороняє переривання сторінки або стовпця.</p>

<hr>

<div class="multicol">
  <h3>Заголовок</h3>
  <p>Це дуже довгий список:</p>
  <ul id="block">
    <li>Пункт номер 1</li>
    <li>Пункт номер 2</li>
    <li>Пункт номер 3</li>
    <li>Пункт номер 4</li>
    <li>Пункт номер 5</li>
    <li>Пункт номер 6</li>
    <li>Пункт номер 7</li>
    <li>Пункт номер 8</li>
    <li>Пункт номер 9</li>
    <li>Пункт номер 10</li>
  </ul>
  <p>А це ще просто текст, не звертайте уваги на нього...</p>
</div>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p, h4 {
  margin-top: 0;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

.multicol {
  background-color: lightyellow;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted coral;

  /* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted coral;

  /* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted coral;
}

#block {
  -webkit-column-break-inside: auto;
  column-break-inside: auto;
  page-break-inside: auto;
  break-inside: auto;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}
var $message = $('#message');

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js