CSS orpans

<!doctype html>
<title>Example</title>
<style>
  div {
    font-size: 3vw;
    columns: 3;
    orphans: 3;
  }
  p {
    margin-top: 0;
    border-top: 5px solid gray;
  }
</style>

<div>
  <p>Nisl purus in mollis nunc sed id semper risus in. Lacus suspendisse faucibus interdum posuere lorem ipsum.</p>
  <p>Aliquet lectus proin nibh nisl. Fermentum odio eu feugiat pretium nibh ipsum. </p>
  <p>Metus aliquam eleifend mi in nulla posuere. Cursus risus at ultrices mi tempus.  </p>
  <p>Eros in cursus turpis massa tincidunt dui ut ornare lectus. Tristique senectus et netus et malesuada fames ac. </p>
</div>

The CSS orpans property specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break.

The orpans property was originally introduced in CSS2 to help authors control line breaks in paged media. CSS3 extends its use to deal with other types of layout features, such as multi-column layouts and CSS Regions (where content from one or more elements can flow through one or more boxes).

The generic term for breaking content across containers is fragmentation. Pages, columns, and regions are referred to as fragmentation containers. They're also referred to as fragmentainers.

Each fragmentation break ends layout of the fragmented box in the current fragmentainer and causes the remaining content to be laid out in the next fragmentainer, in some cases causing a new fragmentainer to be generated to hold the deferred content.

Also see the widows property, which specifies the minimum number of line boxes of a block container that must be left in a fragment after a break.

Syntax

Possible Values

integer

This value specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break.

This must be a positive integer (zero and non-negative integers are invalid).

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: 2
Applies To: Block containers
Inherited?: Yes
Media: Visual, paged media

Example Code

Official Specifications

CSS Fragmentation Module Level 3 (W3C Candidate Recommendation, 9 February 2017)
CSS Level 2.1 (W3C Recommendation 07 June 2011)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.