widows Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:widows

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. widows

Description

The widows property sets or gets the minimum number of visible lines at the top of a page during printing or print preview.

Property Values

Value Description
number the minimum number of visible lines. Negative values are not allowed. The default value is 2
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 2
Return Value: A String, representing the minimum number of lines to print at the top of the page
CSS VersionCSS2

Change the widows and check print or print preview:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeWidows()/*from   ww  w. ja v  a2s.c om*/
{
    document.getElementById("p1").style.widows = 2;
}
</script>
<style>
.othercontent
{
    width:400px;
    border-top:19cm solid #EEE;
}

@page
{
    /* set size of printed page */
    size:21cm 27cm;
    margin-top:2cm;
}

@media print
{
    .widows
      {
          widows:2;
      }
}
</style>
</head>

<body>
<div class="othercontent">
<button onclick="ChangeWidows();">Change widows</button>

<p style="font-size:120%" id="p1">
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 class="othercontent">

</body>
</html>

Related Tutorials