CSS Paged Media - widows

Quiz

CSS widows property allow to specify the last minimum number of lines placed at the top of the page, region, and column.

In typography, an widows is a last line of a paragrph that set at the top of a page and the remaining paragraph content is display on previous page.

Possible Values

<integer> Positive integer. The minimum number of lines appear at the top of the page or column.−

Applies to

Block container elements

DOM Syntax

widows = "<integer>";

CSS Widows - Integer Value

The following example demonstrates that widows: 2 property display the minimum two lines of paragraph at the top of each column in printed page mode −

<html>
<head>
<style>
   div {
      columns: 3;
      widows: 2;
      margin: 5px;
   }
   p {
      border: 2px solid black;
   }
</style>
</head>
<body>
   <h3>To see the effect, open printed page mode.</h3>
   <div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p>
         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
         by the readable content of a page when looking at its layout. Lorem Ipsum is not simply random text.
      </p>
   </div>
</body>
</html>

Print Page