Orphans and Widows

The orphans CSS property refers to the minimum number of lines of text in a container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.

In typography, a widow is the last line of a paragraph appearing alone at the top of a page. The widows CSS property defines how many lines must be left on top of a new page.

In browsers that support the properties, widows and orphans allow us to control how content is displayed on multi column layouts and/or printed media. It is a complement to break-* in that widows and orphans provide an alternative way to break content, just set the values high enough and the content will break (although it may become harder to read.)

[codepen_embed height=”593″ theme_id=”2039″ slug_hash=”RPeyNy” default_tab=”result” user=”caraya”]See the Pen CSS Columns Fill by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Compare the exaple above (CSS Columns Fill) with the one below (Widows and Orphans.)

In the balanced columns example, how can you tell whether 1 or 2 lines at the bottom of the div are part of the paragraph in the next column versus a standalone paragraph?

CSS orphans and widows resolve the issue by moving all the text to the next column (the 2 lines are smaller than the value we set for orphans in the CSS)

[codepen_embed height=”653″ theme_id=”2039″ slug_hash=”xGLLPW” default_tab=”result” user=”caraya”]See the Pen Widows and Orphans by Carlos Araya (@caraya) on CodePen.[/codepen_embed]