Обработка разрывов содержимого в многоколоночном макете

Модуль фрагментации CSS предоставляет подробную информацию о том, как содержимое разрывается между контейнерами фрагментации или фрагментейнерами. Модуль многоколоночного макета, с другой стороны, определяет свойства break-after, break-before и break-inside, которые обеспечивают некоторый контроль внутри и между колонками. В многоколоночном макете ячейка колонки является контейнером фрагмента.

Ячейка колонки может содержать другие элементы разметки, и есть много случаев, где разрыв нежелателен. Например, мы обычно предпочитаем, чтобы подпись изображения не отделялась в новую колонку от изображения, к которому она относится. Также странно завершать колонку заголовком. Свойства фрагментации многоколоночного макета позволяют нам контролировать это.

Существует множество мест, где мы можем контролировать разрывы:

• Разрывы внутри блоков, например, внутри элемента figure.
• Разрывы перед и после блоков, что включало бы наш пример с заголовком выше.
• Разрывы между строками.

Для управления разрывами внутри блоков используйте свойство break-inside. Это свойство принимает следующие значения:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

В примере ниже мы применили break-inside к элементу figure, чтобы предотвратить разделение подписи от изображения.

<div class="container">
  <figure>
    <img
      alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
    <figcaption>Balloons</figcaption>
  </figure>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

img {
  max-width: 100%;
}
figure {
  margin: 0;
  break-inside: avoid;
}
figcaption {
  font-weight: bold;
  border-bottom: 2px solid #999;
}
.container {
  column-width: 200px;
}

Свойства break-before и break-after используются для управления разрывами перед и после элементов. При использовании в многоколоночном контексте они принимают следующие значения:

• auto
• avoid
• avoid-column
• column

В следующем примере мы принудительно создаём разрыв колонки перед элементом h2.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </p>
  <h2>My heading</h2>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
}

h2 {
  break-before: column;
}

Свойства orphans и widows, являющиеся частью модуля фрагментации CSS, также полезны и заслуживают упоминания. Свойство orphans управляет количеством строк, оставшихся в одиночестве в конце фрагмента. Свойство widows управляет количеством оставшихся в одиночестве строк в начале фрагмента.

Свойства orphans и widows принимают целое число <integer> в качестве значения, которое представляет количество строк, которые следует сохранять вместе в конце и начале фрагмента соответственно. Обратите внимание, что эти свойства работают только внутри контейнера блока, например, в абзаце. Если в блоке меньше строк, чем указанное вами значение, все строки будут сохранены вместе.

В примере ниже мы используем свойство orphans для управления количеством строк, оставшихся в нижней части колонки. Вы можете изменить это значение, чтобы увидеть влияние на разбиение содержимого.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
  orphans: 3;
}

Если у вас мало содержимого и вы пытаетесь контролировать разрывы на нескольких элементах, содержимое должно где-то разрываться, поэтому вы не всегда получите ожидаемый результат. В некоторой степени использование фрагментации всегда является подсказкой для браузера, как контролировать разрывы таким образом, если это возможно. Если содержимое не разрывается там, где вы этого хотели, результат может быть неряшливым, но содержимое все равно доступно вашим пользователям.