CSS orphans Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The orphans CSS property is a typographic property that specifies the minimum number of lines in a paragraph that must be left at the bottom of a page or column before a page break or column break can occur. In other words, it controls how many lines of a paragraph are allowed to be "orphaned" at the top of a new page or column, ensuring that at least a specified number of lines stay together for better readability and visual cohesion in printed documents or multi-column layouts on the web.

Initial value: 2
Applies to: Block level elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.orphans

Syntax

orphans: <integer>

Values

<integer>Only positive values are allowed.

Example

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: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}
p {
  background: #8ca0ff;
}
p:first-child {
  margin-top: 0;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS orphans property.

Desktop

12	25	x	9.2	1.3

Tablets / Mobile

25	x	14	1	1.5	4.4

Last updated by CSSPortal on: 31st December 2023

Support Us