CSS-свойство orphans

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

На этой странице рассказывается, что такое «сирота» в типографике, когда свойство фактически действует, а также описаны его синтаксис, значения и приведён рабочий пример.

Что такое «сирота»?

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

Page 1 (bottom)              Page 2 (top)
┌──────────────────┐         ┌──────────────────┐
│ ...               │        │ but the leap into │  ← orphan: just 1 line
│                   │        │ electronic ...    │     was left behind on
│ It has survived   │        │                   │     page 1 → looks bad
└──────────────────┘         └──────────────────┘

При orphans: 2 абзац, в котором внизу страницы осталась бы только одна строка, полностью переносится на следующую страницу, сохраняя вместе не менее двух строк.

Когда применяется `orphans`?

Свойство действует только в контекстах фрагментации — там, где содержимое делится на несколько блоков:

Печать (и предварительный просмотр / вывод в PDF), когда содержимое потока разбивается на несколько страниц.
Многоколоночные макеты, созданные с помощью свойства columns, где строки переходят из колонки в колонку.
CSS постраничные медиа, нередко в сочетании с правилом @media (например, @media print { … }), чтобы применять его только при печати.

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

Свойство orphans имеет свойство-«сестру» widows, которое задаёт минимальное количество строк, допустимых в начале следующей страницы или колонки. Их, как правило, задают вместе.

Начальное значение	2
Применяется к	Блочным контейнерам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS2
DOM-синтаксис	object.style.orphans = "2";

Синтаксис

orphans: <integer> | initial | inherit;

Значение должно быть положительным целым числом. Отрицательные значения и 0 недопустимы и игнорируются (свойство сохраняет предыдущее значение). Значение по умолчанию — 2.

Пример свойства orphans

Пример кода CSS orphans

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      .text {
        padding: 20px;
        background-color: #fff;
        -moz-columns: 10em 3;
        -webkit-columns: 10em 3;
        columns: 10em 3;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
        text-align: justify;
      }
      .text p {
        orphans: 4;
      }
    </style>
  </head>
  <body>
    <h2>Orphans property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Попробуйте сами »

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

Применение orphans только при печати

Поскольку orphans влияет только на фрагментированное содержимое, распространённый приём — ограничить его действие печатным выводом с помощью медиазапроса:

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

Это гарантирует, что на каждой напечатанной странице внизу (orphans) и вверху (widows) будет не менее трёх строк, не затрагивая экранный макет.

Значения

Значение	Описание
`<integer>`	Задаёт количество строк, которые могут оставаться в конце страницы или колонки. Отрицательные значения недопустимы.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

Следующие свойства также управляют тем, как содержимое разбивается по страницам и колонкам:

widows — свойство-«сестра»; минимальное количество строк в начале следующей страницы или колонки.
page-break-inside — запрещает (или разрешает) разрыв страницы внутри элемента.
columns и column-gap — создают многоколоночный макет, в котором orphans может иметь эффект.

Практика

Что делает свойство 'orphans' в CSS?

Оно задаёт минимальное количество строк блочного контейнера, которые должны оставаться внизу страницы при разделении блока между двумя страницами.Оно устанавливает цвет фона элемента.Оно управляет поведением таблиц.Оно изменяет цвет текста в элементе.Оно задаёт минимальное количество строк блочного контейнера, которые должны отображаться вверху следующей страницы при разделении блока между двумя страницами.