The widows property is used to set or return the minimum number of lines. These lines must be visible at the top of a page for an element. The widows property only affects block-level elements.
Syntax:
- Return the widows property:
object.style.widows
object.style.widows = "number | initial | inherit"
Property Values:
- number: Integer value that specify the minimum number of visible lines. The default value is 2.
- initial: Sets this property to its default value.
- inherit: Inherits this property from its parent element.
Return Values: It returns a string value, which representing the minimum number of lines to print at the top of the page.
Example:
html
<html>
<head>
<script>
function CWidows() {
document.getElementById("pID").style.widows
= document.getElementById("widows").value;
}
</script>
<style>
.content {
width: 400px;
border-top: 19cm solid green;
}
@page {
/* set size of printed page */
size: 21cm 27cm;
margin-top: 2cm;
}
@media print {
.widows {
widows: 2;
}
}
</style>
</head>
<body>
<center>
<div class="content">
<input id="widows" value="2">
<button onclick="CWidows();">Change widows</button>
<p style="font-size:120%" id="pID">
Change widows and see the print preview.
<br> Line 2
<br> Line 3
<br> Line 4
<br> Line 5
<br> Line 6
<br> Line 7
<br> Line 8
<br>
</p>
</div>
<div class="content">
</div>
</center>
</body>
</html>
|
Output: Print view.
Supported Browsers: The browsers supported by HTML DOM Style widows Property are listed below:
- Google Chrome 25
- Edge 12
- Internet Explorer 8
- Opera 9.2
- Safari 1.3
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Jul, 2023
Like Article
Save Article