CSS break-inside — розрив усередині елемента

HTML

<div class="multicol">
  <h3>Заголовок</h3>
  <p>Це дуже довгий список:</p>
  <ul>
    <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>Завдяки властивості <code>break-inside: avoid;</code> список (той що ліворуч) розташований в одній колонці, хоча у першій ще залишилося для нього місце!</p>
</div>

CSS

.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;
}

.multicol ul {
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

HTML

<div class="cols">
    <p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
    <ul>
        <li>перший пункт</li>
        <li>другий пункт</li>
        <li>третій пункт</li>
    </ul>
</div>

CSS

.cols {
    columns: 2;
    column-rule: 1px solid #ccc;
}

ul {
    break-inside: avoid;
    background: #eef6ff;
}

HTML

<div class="cols">
    <div class="card">Картка перша. Кілька рядків тексту, щоб їй було що розривати.</div>
    <div class="card">Картка друга. Кілька рядків тексту, щоб їй було що розривати.</div>
    <div class="card">Картка третя. Кілька рядків тексту, щоб їй було що розривати.</div>
    <div class="card">Картка четверта. Кілька рядків тексту, щоб їй було що розривати.</div>
    <div class="card">Картка п'ята. Кілька рядків тексту, щоб їй було що розривати.</div>
</div>

CSS

.cols {
    column-count: 2;
    column-gap: 20px;
    width: 420px;
}

.card {
    break-inside: avoid;
    margin-bottom: 12px;
    padding: 10px;
    background: #f0f4f8;
    border-left: 4px solid #0172ad;
    font: 14px/1.5 sans-serif;
}

HTML

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

CSS

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

body {
  font-family: monospace;
  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;
}

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('break-inside', this.id));

}));