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]