CSS orphans

The orphans property in CSS is used to specify the minimum number of lines in a block element that must appear at the top of a new page or column. This property is often used in print media to control how text is displayed when breaking across pages or columns, ensuring that there are no single lines left at the top of a page or column.

The orphans property accepts a numerical value, which represents the minimum number of lines that must be left at the top of a new page or column. This value can be set using either a number or the inherit keyword.

Let's take a look at an example to see how the orphans property works:

Result:

This is an example paragraph that demonstrates the use of the orphans property. By setting the orphans property to 2, we ensure that at least two lines of text will appear at the top of a new page or column.


p {
  orphans: 2;
}

In this example, the orphans property is applied to a paragraph element (<p>) with a value of 2. This means that there must be at least two lines of text at the top of a new page or column.

You can adjust the value of the orphans property to suit your specific styling needs, ensuring that text is displayed appropriately when breaking across pages or columns in print media.