CSS свойство orphans

❮ Назад Вперед ❯

Свойство orphans определяет минимальное количество строк блочного контейнера, которое должно быть оставлено в конце страницы или колонки.

Orphan - это первая строка параграфа, которая появляется в нижней части страницы, а параграф продолжается на следующей странице .

Значение по умолчанию	2
Применяется	К элементам блочного контейнера.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS2
DOM синтаксис	object.style.orphans = "2";

Синтаксис

orphans: <integer> | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
        <p>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</span>
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.   
        </p>
      </div>
    </div>
  </body>
</html>

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

В данном примере четыре строки, выделенные зеленым цветом оставлены в конце первой колонки.

Значения

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