Style widows Property
Example
Change the widows and check print or print preview:
"color:brown">"color:mediumblue"><html"color:mediumblue">>
"color:brown">"color:mediumblue"><head"color:mediumblue">>
"color:brown">"color:mediumblue"><script"color:mediumblue">>"color:black">
"color:mediumblue">function ChangeWidows()"color:red">
{
"color:red">
document.getElementById("color:brown">"p1").style.widows = document.getElementById("color:brown">"widows").value;
"color:red">
}
"color:brown">"color:mediumblue"></script"color:mediumblue">>
"color:brown">"color:mediumblue"><style"color:mediumblue">>"color:brown">
.othercontent
"color:red">"color:black">{
width"color:mediumblue">"color:black">: 400px"color:black">;
border-top"color:mediumblue">"color:black">: 19cm solid #c3c3c3"color:black">;
"color:black">}
@page
"color:red">"color:black">{
"color:green">/* set size of printed page */
size"color:mediumblue">"color:black">: 21cm 27cm"color:black">;
margin-top"color:mediumblue">"color:black">: 2cm"color:black">;
"color:black">}
@media print
"color:red">"color:black">{
.widows
{
widows"color:mediumblue">"color:black">:2"color:black">;
"color:black">}
}
"color:brown">"color:mediumblue"></style"color:mediumblue">>
"color:brown">"color:mediumblue"></head"color:mediumblue">>
"color:brown">"color:mediumblue"><body"color:mediumblue">>
"color:brown">"color:mediumblue"><div"color:red"> class"color:mediumblue">="othercontent""color:mediumblue">>
"color:brown">"color:mediumblue"><input"color:red"> id"color:mediumblue">="widows" value"color:mediumblue">="2""color:mediumblue">>
"color:brown">"color:mediumblue"><button"color:red"> onclick"color:mediumblue">="ChangeWidows();""color:mediumblue">>Change widows"color:brown">"color:mediumblue"></button"color:mediumblue">>
"color:brown">"color:mediumblue"><p"color:red"> style"color:mediumblue">="font-size:120%" id"color:mediumblue">="p1""color:mediumblue">>
Change widows and see the print preview."color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 2"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 3"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 4"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 5"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 6"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 7"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 8"color:brown">"color:mediumblue"><br"color:mediumblue">>
"color:brown">"color:mediumblue"></p"color:mediumblue">>
"color:brown">"color:mediumblue"><div"color:red"> class"color:mediumblue">="othercontent""color:mediumblue">>
"color:brown">"color:mediumblue"></body"color:mediumblue">>
"color:brown">"color:mediumblue"></html"color:mediumblue">>
Try it Yourself »
Definition and Usage
The widows property sets or returns the minimum number of lines for an element that must be visible at the top of a page (for printing or print preview).
The widows property only affects block-level elements.
Tip: widows:5 means that at least 5 lines must be visible below the page break.
Tip: See the orphans property to set or return the minimum number of lines for an element that must be visible at the bottom of a page.
Browser Support
The widows property is supported in Internet Explorer, Opera and Chrome.
Note: The widows property is not supported in Firefox or Safari. The property is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later has full support.
Syntax
Return the widows property:
object.style.widows
Set the widows property:
object.style.widows="number|initial|inherit"
Property Values
| Value | Description |
|---|---|
| number | An integer that specifies the minimum number of visible lines. Negative values are not allowed. The default value is 2 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | 2 |
|---|---|
| Return Value: | A String, representing the minimum number of lines to print at the top of the page |
| CSS Version | CSS2 |
Style Object
