CSS orphans Property

Description

The orphans property refers to the minimum number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.

Initial value

2

Applies to

Block level elements

Inherited

Yes

Media

Visual, Paged

Computed value

As specified

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.orphans

Syntax

orphans: <integer>

Values

• <integer>Only positive values are allowed.

Example

<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>

div {
  background: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}
p {
  background: #8ca0ff;
}
p:first-child {
  margin-top: 0;
}

Browser Support

Desktop
8	12	25	X	9.2	1.3
Tablets / Mobile
≤37	25	X	14	1	1.5

Last updated by CSSPortal on: 3rd November 2019