CSS widows Property
Use the widows CSS property for specifying the number of lines that can be left at the top of page or column. Read about property and try examples.
The widows CSS property specifies the minimum number of lines of a block-level container that must remain at the top of a page or column.
A widow is a single line or word that appears alone at the top of a page or column.
This property is primarily used in paged media contexts, such as @media print or @page rules.
The widows property has a related property: orphans, which specifies the minimum number of lines that must stay at the bottom of the previous page or column. In other words, the lines remaining at the end of the previous page are orphans, while the lines left at the top of the new page are widows.
Why use the widows property
When a paragraph is split across two pages or two columns, the break can leave just one stray line stranded at the top of the next page. That isolated line is hard to read and looks unpolished in printed documents and multi-column layouts.
The widows property lets you set a minimum number of lines the browser must keep together at the top of the new page or column. If honoring the split would leave fewer lines than allowed, the browser pushes additional lines forward so the threshold is met. For example, widows: 3 guarantees that at least three lines of a paragraph travel together to the next page.
Pair widows with orphans to control both ends of a break: orphans protects the bottom of the leaving page, widows protects the top of the arriving page.
Negative values are invalid. The value must be a positive integer.
| Initial Value | 2 |
|---|---|
| Applies to | Block container elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.widows = "3"; |
Syntax
CSS widows values
widows: <integer> | initial | inherit;Example of the widows property:
CSS widows code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: Roboto, Helvetica, sans-serif;
}
hr {
margin: 50px 0;
}
.example {
margin: 30px auto;
width: 800px;
}
@media print {
.text {
padding: 20px;
background-color: #fff;
columns: 10em 3;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
}
</style>
</head>
<body>
<h2>Widows property example</h2>
<div class="example">
<div class="text">
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</body>
</html>The widows property only takes effect in fragmented contexts — paged media (print preview, @page) or CSS multi-column layouts. On a normal, continuously scrolling web page there are no page or column breaks, so the property has nothing to act on. The example above uses @media print to demonstrate it: open the browser's print preview to see the effect.
When it does and doesn't apply
For widows to have any effect, three things must be true:
- The content is broken across fragments — either printed pages or multi-column boxes.
- The property is set on a block container (such as a
<p>or<div>), not on inline text. - The break falls inside the affected block. Use page-break-inside (or
break-inside: avoid) when you want to keep a whole block from splitting at all.
Browser support for widows is uneven outside of print. Print engines (PDF generation, print preview) honor it widely, while support in screen multi-column layouts varies between browsers, so treat it as a progressive enhancement rather than a guarantee.
Values
| Value | Description |
|---|---|
<integer> | Specifies the minimum number of lines that must remain at the top of a page or column. Negative values are invalid. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent element. |