CSS Paged Media - orphans

Quiz

CSS orphans property allow to specify the starting minimum number of lines placed at the bottom of the page, region, and column.

In typography, an orphan is a first line of a paragrph that set at the bottom of a page and the remaining paragraph content is display on next page.

Possible Values

<integer> Positive integer. The minimum number of lines appear at the bottom of the page or column.−

Applies to

Block container elements

DOM Syntax

orphans = "<integer>";

CSS Orphans - Integer Value

The following example demonstrates that orphans: 2 property add minimum two lines of paragraph at the bottom of each column in printed page mode −

<html>
<head>
<style>
   div {
      columns: 2;
      orphans: 2;
      margin: 5px;
   }
   p {
      border: 2px solid black;
   }
</style>
</head>
<body>
   <div>
      <h3>To see the effect, open printed page mode.</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.by the readable content of a page when looking at its layout. Lorem Ipsum is not simply random text. Lorem Ipsum is not simply random text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is not simply random text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>

Print Page