CSS - widows Property

Quiz

In CSS, the widows property is used to control the minimum number of lines of a block of text that must be displayed at the top of a page, region, or column before a page or column break can occur. Like the orphans property, it is typically used to manage pagination and ensure that a specific number of lines are displayed together for improved readability in printed documents or multi-column layouts.

If the number of lines at the top of the block is less than the value of the widows property, the block is moved to the next page or column to ensure that the specified number of lines is displayed together.

As per typography, widows is the last line of a paragraph that appears at the top of the page, alone; when the paragraph is continued from the old page.

Possible Value

<integer>: Specifies the number of lines that can be shown at the top of a fragment after the fragmentation break. It should have a positive value only. Default value is 2.

Applies to

All the block-level elements.

DOM Syntax

object.style.widows = "3"

Together with the orphans property (which controls the minimum number of lines to be displayed at the bottom of a block), the widows property helps control how content flows and breaks across pages or columns, ensuring that a specific amount of content remains together for better readability and aesthetics in printed documents or multi-column layouts.

widows is not supported on Firfox browser.

CSS widows - <integer> Value

Here is an example showing the usage of widows CSS property, where widows value is passed as an <integer> through a class declaration (.widows-demo):

<html>
<head>
<style>
   div.widows-demo {
      background-color: tomato;
      height: 170px;
      columns: 3;
      widows: 3;
      padding: 5px;
   }

   p {
      background-color: lightyellow;
   }

   p:first-child {
      margin-top: 0;
   }
</style>
</head>
<body>
   <h1>Widows property</h1>
   <div class="widows-demo">
      <p>Paragraph one that shows some text having just one line.</p>
      
      <p>
         Paragraph two in the same div "widows-demo", with some styling applied.
         Testing for the working of orphan property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
      </p>
      
      <p>
      Paragraph three for some extra text for the testing purpose.
      Second line in the third paragraph to test the widows property.
      </p>
   </div>
</body>
</html>

In the above example:

a class is defined on div element (widows-demo), with CSS styling such as background-color, height, padding, column and widows.
the div is divided into three columns and widows value set to 3.
three p elements are added under the parent div.
the output is based on the value of widows property (in this case 3), and as the fragment breaks, the content is displayed accordingly.

Note: Change your screen size to see the change in the layout.

CSS widows - initial Value

Here is an example showing the usage of widows CSS property, where the widows value is set as initial through an id declaration, later called on a div element:

<html> 
<head> 
<style>
   #widows-demo { 
      columns: 3; 
      column-gap: 5em;
      widows: initial;
   } 

   div {
      background-color: green;
      padding: 5px;
   }

   p {
      background-color: antiquewhite;
   }

   span {
      font-style: italic;
      color: red;
      font-weight: bold;
   }
</style>
</head>
<body>
	<div id="widows-demo"> 
		<p> 
      <span>
         Paragraph one in the div, with some styling applied.
         Testing for the working of widows property of CSS.
         There are three lines in this paragraph.   
         Paragraph one having few more lines for some extra content for the testing purpose.
         The widows CSS property is used to set the minimum 
         number of lines on the new page.
         Paragraph one in the div, with some styling applied.
         Testing for the working of widows property of CSS.
         There are three lines in this paragraph.   
         Paragraph one in the div, with some styling applied.
         Testing for the working of widows property of CSS.
         There are three lines in this paragraph.   
      </span>
		</p> 
      
		<p> 
         Paragraph two in the same div, with some styling applied.
         Testing for the working of widows property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
         The widows CSS property is used to set the minimum 
         number of lines on the new page.
		</p> 
      
		<p> 
         Paragraph three for some extra text for the testing purpose.
         Second line in the third paragraph.
         Testing for the widows property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
      
      <p> 
         Paragraph four in the third column of the page.
         Number of lines in this paragaraph is two.
         Testing for the orphans CSS property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
	</div> 
</body>
</html>

An id is defined (#widows-demo) and applied on div element, with CSS styling such as column, column-gap and widows.
The div is divided into three columns with a gap of 5em and widows value set to initial, which is default as 2.
Four p elements are added under the parent div.
The output is based on the value of widows property (in this case inherit), and as the fragment breaks, the content is displayed accordingly.

CSS widows - Media Print

Here is an example showing the usage of widows CSS property, where the widows value is set as an <integer> through a media query (@media print):

<html>
<head>
<style>
   @media print {
      p {
         widows: 5;
         columns: 3;
         column-gap: 3em;
      }

      button {
         display: none;
      }
   }
</style>
</head>
<body>
   <article>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. 
   </p>
  
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
   </p>
   </article>
   
   <button>Print</button>
   
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

A media query is defined and applied on p element, in print mode, with CSS styling such as column, column-gap, and widows.
There is a button "Print" on click of which the widows value, i.e., 5, is applied on the content.
The new section shows last five lines of the last paragraph, on top.

Print Page