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

/* <integer> значения */
orphans: 2;
orphans: 3;

/* Глобальные значения */
orphans: inherit;
orphans: initial;
orphans: unset;

В типографии, orphan это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)

Начальное значение2
Применяется кблочные контейнеры
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокper grammar

 

Синтаксис

Значения

<integer>
Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.

Формальный синтаксис

<integer>

Пример

HTML

<div>
  <p>This is the first paragraph containing some text.</p>
  <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p>
  <p>This is the third paragraph. It has a little bit more text than the first one.</p>
</div>

CSS

div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
 

Результат

 

Спецификации

Спецификация Статус Комментарий
CSS Fragmentation Module Level 3
Определение 'orphans' в этой спецификации.
Кандидат в рекомендации Расширяет orphans для применения в любых фрагментах, включая страницы, регионы и столбцы.
CSS Level 2 (Revision 1)
Определение 'orphans' в этой спецификации.
Рекомендация Первое определение.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
orphansChrome Полная поддержка 25Edge Полная поддержка 12Firefox Нет поддержки НетIE Полная поддержка 8Opera Полная поддержка 9.2Safari Полная поддержка 1.3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 25Firefox Android Нет поддержки НетOpera Android ? Safari iOS Полная поддержка 1Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva, mdnwebdocs-bot, Sebastianz, frost-nzcr4
Обновлялась последний раз: opereverzeva,