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
Explorer Edge Chrome Firefox Opera Safari
81225X9.21.3
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3725XX1X

Last updated by CSSPortal on: 3rd November 2019