Using CSS to Deal with Widows

Terminology in typesetting and typography can get confusing, especially when different people publish conflicting articles on what an 'orphan', 'runt', or 'widow' is. For the sake of consistency, I'll stick with the Wikipedia definition:

“

A paragraph‑ending line that falls at the beginning of the following page or column, thus separated from the rest of the text. Mnemonically, a widow is "alone at the top" (of the family tree but, in this case, of the page or column).

For example:

If you are actually looking for a way to remove orphans or runts from your website typesetting, then I cover that in another article here. In that case, a JavaScript/React‑based solution is used to wrap the last two words of a string of text in a non‑wrapping element (either a nobr or an inline element using white‑space: nowrap).

In the case of widows, the solution is ‑ thankfully ‑ a little more straightforward and can be achieved by just using the break‑inside CSS property:

break-inside: avoid;

What this does is simply indicate to the browser that you would prefer the content within this element (be it a <section> within a document, a <p>, or an entire piece of site structure) is not broken down into smaller sections. This was originally introduced to tackle content flow within columned layouts (the original WebKit property for this was ‑webkit‑column‑break‑inside), and even earlier than that, its use was limited within print stylesheets. Now, it will achieve the same effect more or less anywhere within your website where content may get rolled over two or more zones.

I use this very technique in the columned layout of the Terms & Conditions pages here on my own website to avoid the <section> tags breaking and ‑ potentially ‑ leaving a title stranded at the bottom of a column.

At this point, support is extremely good too, although if not using an autoprefixer (does anybody still develop without one?) then you should be aware of a nuance where ‑ until recently ‑ Firefox required you to use page‑break‑inside instead:

.classname {  break-inside: avoid;  page-break-inside: avoid;}

Setting this to avoid is universally supported, if you wanted to override this again to allow an element to break across layouts, then the opposite is auto.