break-before у CSS — розрив сторінки чи колонки перед

правити

Загальний опис

правити

Порада

Також зауважте, що на момент написання більшість браузерів підтримують властивість у специфікації CSS 2.1, але не останню специфікацію

автор: Svitlana правити

Нотатка

Браузери WebKit і Blink не підтримують цю властивість, але деякі з них мають нестандартні властивості -webkit-column-break-before і -webkit-region-break-with з аналогічними параметрами, як break-before.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

break-before: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region;

Властивість break-before може отримувати 12 значень:

auto

Нi вказує, ні забороняє переривання сторінки або стовпця.

автор: Svitlana

правити

avoid

Уникання переривання сторінки після основного контейнера.

автор: Svitlana

правити

avoid-page

Уникання переривання сторінки після основного контейнера.

автор: Svitlana

правити

page

Завжди примусове переривання сторінки після основного контейнера.

автор: Svitlana

правити

left

Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована як ліва.

автор: Svitlana

правити

right

Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована як права.

автор: Svitlana

правити

recto

Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована або як ліва сторінка, або права сторінка, залежно від того, яка сторінка є другою.

автор: Svitlana

правити

verso

Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована або як ліва сторінка, або права сторінка, залежно від того, яка сторінка є першою.

автор: Svitlana

правити

avoid-column

Уникання переривання колонки після основного контейнера.

автор: Svitlana

правити

column

Завжди примусове переривання колонки після основного контейнера.

автор: Svitlana

правити

avoid-region

Уникання переривання області після основного контейнера.

автор: Svitlana

правити

region

Завжди примусове переривання області після основного контейнера.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	50	65	10	37	12	10
column	Full support	Не підтримується	Full support	Full support	12.0	10.0
avoid-column	Не підтримується	Не підтримується	Не підтримується	Не підтримується	12.0	10.0
always	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
	50	50	65	10
column	Full support		Не підтримується	Не підтримується
avoid-column	Не підтримується		Не підтримується	Full support
always	Не підтримується		Не підтримується	Не підтримується

Приклади

+ запропонувати свій приклад у пісочниці

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

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

.new {
    break-before: column;
}

<p><strong>Ця властивість може не підтримуватися Вашим браузером (підтримується лише Internet Explorer та Opera 11.10 - 12.1, й то частково)!</strong></p>

<div class="multicol">
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <hr>
  <h3>Heading 2</h3>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

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

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

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

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

.multicol hr {
  break-before: avoid;
}

<p class="cap">1. Без розривів — усе тече суцільно:</p>
<div class="mc">
    <p>перший</p><p>другий</p><p>третій</p><p class="hot">четвертий</p><p>п'ятий</p>
</div>

<p class="cap">2. break-before: column — у Chrome четвертий переїде в другу колонку, у Firefox ні:</p>
<div class="mc">
    <p>перший</p><p>другий</p><p>третій</p><p class="hot col">четвертий</p><p>п'ятий</p>
</div>

<p class="cap">3. break-before: always — колонку не розриває ніде:</p>
<div class="mc">
    <p>перший</p><p>другий</p><p>третій</p><p class="hot alw">четвертий</p><p>п'ятий</p>
</div>

<p class="cap">4. break-inside: avoid — працює скрізь: висока картка не ділиться:</p>
<div class="mc">
    <p>перший</p><p>другий</p>
    <div class="card">картка, яку не можна різати</div>
    <p>після картки</p>
</div>

.cap {
    margin: 18px 0 6px;
    max-width: 620px;
    font: 600 .9em/1.45 system-ui, sans-serif;
    color: #5a6472;
}

.mc {
    column-count: 3;
    column-gap: 16px;
    column-fill: auto;
    column-rule: 1px solid #b9c6d8;
    width: 460px;
    height: 120px;
    padding: 6px;
    border: 1px solid #b9c6d8;
    font: 13px/24px system-ui, sans-serif;
}

.mc p {
    margin: 0;
    background: #eef1f5;
}

.mc .hot {
    background: #f2b134;
}

.col {
    break-before: column;
}

.alw {
    break-before: always;
}

.card {
    break-inside: avoid;
    height: 72px;
    padding: 4px 6px;
    background: #c0392b;
    color: #fff;
}

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

<p><strong>Ця властивість може не підтримуватися Вашим браузером (підтримується лише Internet Explorer та Opera 11.10 - 12.1, й то частково)!</strong></p>

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

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

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

<hr>

<div class="multicol">
  <h3 id="block">Заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>А це ще просто текст, не звертайте уваги на нього...</p>
</div>

* {
  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-before: auto;
  column-break-before: auto;
  page-break-before: auto;
  break-before: auto;
}

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

message {
  display: none;
}

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-after', this.id));

}));