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.
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;
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.
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.
- Read more about the CSS
<widows>property on MDN.
- You can also read the CSS
<widows>property on CSSWG.
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.