To limit the size of widows for all article elements to 3 lines or more use

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Default value:noneInherited:noAnimatable:yes, see individual properties. Read about animatable Try itVersion:CSS2JavaScript syntax:object.style.maxWidth="600px" Try it

The widows property sets or returns the minimum number of lines for an element that must be visible at the top of a page (for printing or print preview).

The widows property only affects block-level elements.

Tip: widows:5 means that at least 5 lines must be visible below the page break.

Tip: See the orphans property to set or return the minimum number of lines for an element that must be visible at the bottom of a page.

While CSS has many options for controlling the first-line of text, it’s ability to control the last line is limited, although not without some uses:

Remnants & Fragments

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page:

Browser’s don’t have a concept of “pages” for the screen, but widows can come up when a site is printed, and should be controlled for:

p { widows: 3; }

This translates to “if a paragraph breaks to the next printed page, the remnant must consist of at least three lines.” A browser that supports the property will space elements in such a way as to make that happen:

“Orphans”, on the other hand, occur at the start of text blocks. The most common example is a paragraph that starts at the bottom of a page:

Again, it can be controlled with by setting the orphans property to a reasonable value:

p { orphans: 3; }

Meaning: a paragraph must start with at least three lines on a page before it can be broken; otherwise, the paragraph should start on a new page.

The result:

Suggested Use

Both widows and orphans should have reasonable default values set in site stylesheets:

p { widows: 3; orphans: 3: }

While elements like headings can also have dangling or leading fragments, it’s more common to treat then with page-break controls than widows and orphans.

An easy (if somewhat Dickensian) way to remember the terms:

• Orphans are “left alone at the beginning”.
• Widows are “left alone at the end”.

Widows & Orphans on Screen

By its very nature, responsive design creates innumerable fragments of widowed text. Some of these can be treated by intelligent use of hyphens and justification, but others are simply unavoidable.

Many resources will tell you that widows and orphans properties can only be used in print, but that’s not true: in supportive browsers, the properties can also be applied to newspaper-style web column layouts, which often experience the same problems:

The prefix-free CSS, together with a solution for orphaned text:

div {
	column-count: 2;
	column-gap: 2rem;
}
p {
	line-height: 1.6;
	font-size: 1rem;
	orphans: 2;
}

Result:

I assume that this same ability will be applied to CSS Regions, once the spec is fully supported in browsers.

Single-Line Fits

The most egregious case of text widows occur in headings, where terminating words are often left dangling on a new line. There are solutions for this: FitText is a JQuery plugin that resizes text dynamically as the browser resizes; Chris Coyier’s technique inserts non-breaking spaces, and there are also SVG solutions. My personal preference is to use

p { orphans: 3; }

p { orphans: 3; }

Browser Support

Support for widows and orphans is very good: as of this writing, Firefox lacks any awareness of the properties, but all other modern browser versions have excellent support. As such, the properties should be considered progressive enhancement for a site: finishing touches that are great to have and are well-appreciated by users, but not super-critical for page content.