{"id":14140,"date":"2011-09-06T19:43:10","date_gmt":"2011-09-07T02:43:10","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14140"},"modified":"2022-06-13T08:16:21","modified_gmt":"2022-06-13T15:16:21","slug":"widows","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/widows\/","title":{"rendered":"widows"},"content":{"rendered":"\n
In typography terms, a widow is the last line of a paragraph that is left alone on a new page or in a new column. The If a paragraph can’t fit on one page in its entirety, it is split wherever it is possible. That way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted so many word processors require at least two lines to be left on an old page, instead of one. The Note that the widows<\/code> property in CSS controls the minimum number of lines of a paragraph that can fall to a new page. This property only affects paged media such as
print<\/code>.<\/p>\n\n\n\n
@media print {\n p {\n widows: 3;\n }\n}<\/code><\/pre>\n\n\n\n
orphan<\/code> property acts similar. You can give it either a positive number (where 2 is the default) or
inherit<\/code>.<\/p>\n\n\n\n
widows<\/code> property does not generally affect non-paged media such as
screen<\/code>. However, browsers supporting both
widows<\/code> and
columns<\/code><\/a> will apply the intended functionality to columns as well. Also, the property only affects block-level elements.<\/p>\n\n\n\n
\n
widows<\/code> = minimum number of lines in a paragraph split on the new<\/strong> page.<\/li>\n
orphans<\/code> = minimum number of lines in a paragraph split on the old<\/strong> page.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
Other resources<\/h3>\n\n\n