What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re creating a multi-column layout.
How: You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:
p,
h2,
h3 {
orphans: 3;
widows: 3;
}Where: The article Orphans and Widows in CSS by Toby Osbourn on tosbourn.com
Thoughts: Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report that got some attention two years ago and there doesn’t seem to be any reason why this hasn’t been implemented, except that it just hasn’t. I have to say I’m disappointed in my favorite browser.
On a more personal note, I came across this in one of my own stylesheets for a website I hadn’t spend any time on in the last two / three years and I have no memory of putting them in. I had to look up what it was.
Good article on multi-column layout by Rachel Andrew can be found at Smashing Magazine.
And if you want to read a bit more about using columns as a masonry gallery of sorts, you can read CSS Columns Across Browsers