Using CSS to Deal with Widows

Image by Manolo Chrétien.

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:

An excerpt from the letter written by Doc to Marty in Back to the Future II, demonstrating a 'widow' where the final line of the first paragraph appears alone at the top of the second column.

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 a paged or multi‑column layout, break-inside can prevent the browser fragmenting an entire paragraph or section:

break-inside: avoid;

In a fragmentation context, this asks the browser not to split an element such as a <section> or <p>. It may move the whole element to the next page or column; it does not control ordinary line wrapping or guarantee that a final line stays with preceding lines. The older WebKit property was -webkit-column-break-inside, reflecting its column‑layout origins; print stylesheets were another early use.

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.

Browser implementation data is still worth checking for the fragmentation context you need. Older Firefox versions could rely on page-break-inside in paged media:

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

The initial value is auto, which allows a break where the fragmentation algorithm otherwise chooses one. Support for avoid has varied by browser and fragmentation context, so it is not a universal line‑wrapping fix.

Untangling a delivery problem?

Send the symptoms, constraints, and affected routes. I'll help identify whether the issue sits in the application, platform, content model, deployment path, or search surface.

Get in touch