orphans

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

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

Начальное значение2
Применяется кблочные контейнеры
Наследуетсяда
Обработка значениякак указано
Animation typeby computed value type

Синтаксис

Значения

<integer>

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

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

Пример

HTML

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

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

p {
  background-color: #8ca0ff;
}

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

Результат

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

Specification
CSS Fragmentation Module Level 3
# widows-orphans

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
orphans

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

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