CSS widows Property

When a paragraph is split over two pages in paged media, the CSS widows property is used to define the minimum number of lines that must be left at the top of the second page or column. In typography, a widow is the last line of a paragraph that appears alone at the top of a new page or column. Setting the widows property allows us to prevent the occurrence of single-line widows.

The initial value of CSS widows property is 2. You can only apply it to block container elements. The widows can be inherited which means block container elements that are children of a given element will also have the same value for widows property as the parent element. The final computed value of the widows property is the exact same value that you initially supplied. This property is not animatable. The transition between different values will be sudden.

Syntax

This is the formal syntax for using widows property.

widows: <integer> | inherit

Here are some examples of using this property.

/* <integer> values */
widows: 2;
widows: 3;

/* Global values */
widows: inherit;
widows: initial;
widows: unset;

Acceptable Values

<integer>

This value is used to specify the minimum number of lines that can stay alone on the top of a new page when a paragraph is split. If the value is not positive, the declaration is invalid.

Working Examples

See the Pen CSS widows Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS widows property is supported in Chrome 25+, Opera 9.2+, Internet Explorer 8+ and on Android. Unfortunately, it is not supported in Firefox, Safari and iOS.

Further Reading

  1. Read more about the CSS <widows> property on MDN.
  2. You can also read the CSS <widows> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top