The widows property specifies the minimum number of lines that are displayed at the top of the second page when an element's content cannot fit in the first page. This property only affects block-level elements. This is even applicable for columns, in addition to pages.
For example, consider you have a long paragraph whose content is not able to fit in one page and as a result of this just its one line is visible on the second page, which will obviously not have a good visual impact on users. This left out line is called a widow. In order to display more number of lines on the new page (widows) of the paragraph on the new page, you need to give that number as value to the widows property.
CSS
widows: value;
Before moving to its example, have a look at the values that this property can take.
Values
<integer> : This number specifies the number of lines (widows) that you want. This value must be a positive integer.
initial : This is the default value which is 2.
inherit : The element inherits value from its parent element.
unset : This sets the inherited value if it inherits from its parent, otherwise it sets to its initial value.
Examples
Look at the following two examples in which the number of widows are specified which could not be accommodated within a div and thus are displayed in a new column.
HTML
<div>
<p>Lorem ipsum ... elit.</p>
<p>Praesent placerat... libero.</p>
<p>Vivamus porttitor ... eget tortor.</p>
</div>
CSS
div {
background-color: #42526C;
padding: 10px 10px;
columns: 3;
widows: 3;
width:400px;
height: 110px;
}
p {
background-color: #F8CDBE;
}
See the Pen CSS Widow Property by Aakhya Singh (@aakhya) on CodePen.
CSS
div {
background-color: #42526C;
padding: 10px 10px;
columns: 3;
widows: 3;
width:400px;
height: 110px;
}
p {
background-color: #F8CDBE;
}
See the Pen CSS Widow Property by Aakhya Singh (@aakhya) on CodePen.
In the two examples, I specified the number of columns in the div using the columns property. In the first example, the number of columns in the div are 3 whereas it is 2 in the second example. I gave a value 3 to the widows property in the div, which means that there will be a minimum of 3 lines in the next column outside the div. Thus, the content of the three paragraphs got adjusted in both the examples so that there is a minimum of 3 widows outside the div.
The widows property does not affect non-paged media. There is a similar property orphans which specifies the minimum number of lines which are displayed at the bottom of the old page when the content of the element splits and the rest of the content gets displayed on a new page.
Browsr Support
This property is not supported by Firefox and some older Webkit-based browsers.
