widows

By Dan Gold

widows sets the minimum number of paragraph lines kept at the top of a page or column fragment. It only matters when text is split across fragments; it does not change an ordinary unbroken paragraph.

Inspect a column break

This narrow two-column passage has a fixed height to force fragmentation. Count the lines at the top of each fragment. Try changing widows:3 to 1 in the editor. The exact break depends on the font, available space, and browser’s fragmentation implementation.

HTML and CSS

HTML

<div class="reading">
  <p>
    One line of practice.<br />Two lines of practice.<br />Three lines of
    practice.<br />Four lines of practice.<br />Five lines of practice.<br />Six
    lines of practice.<br />Seven lines of practice.<br />Eight lines of
    practice.<br />Nine lines of practice.<br />Ten lines of practice.
  </p>
</div>

CSS

.reading {
  columns: 2;
  height: 160px;
  column-gap: 1.5rem;
}
p {
  margin: 0;
  line-height: 20px;
  widows: 3;
  orphans: 1;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Use it in print styles

Open this copied document in a browser and use Print Preview with a small paper size or larger text. The screen preview intentionally remains continuous; the rule is inside @media print. Both limits are set together, because the break algorithm must consider both ends of the paragraph.

HTML and CSS

HTML

<h1>Print practice</h1>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>
<p>
  Begin with a small document. Add a heading and a paragraph. Check the reading
  order before changing the appearance.
</p>
<p>
  Give the container room to show the layout. Change one value at a time, then
  compare the result with the original.
</p>
<p>
  At a narrow width, keep the text readable. A layout that works on a large
  screen may need fewer columns on a phone.
</p>

<h1>Print practice</h1>

 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.


 Begin with a small document. Add a heading and a paragraph. Check the reading
 order before changing the appearance.


 Give the container room to show the layout. Change one value at a time, then
 compare the result with the original.


 At a narrow width, keep the text readable. A layout that works on a large
 screen may need fewer columns on a phone.

CSS

@media print {
  p {
    widows: 3;
    orphans: 3;
  }
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Values and defaults

The initial value is 2 and widows is inherited. Use a strictly positive integer; zero and fractional values are invalid. It applies to block containers and constrains line breaks within them. Widows concerns the top; orphans concerns the other end of a fragment.

Common mistakes

A short passage that fits without splitting shows no effect. This is a fragmentation constraint, not a promise that impossible limits will always be met: limited page space can force the browser to relax constraints. Implementations differ, including in print output, so inspect the target browser’s preview instead of claiming universal support or exact pagination. It does not keep an entire heading with the next paragraph; a break-after rule serves that different purpose.

Learn orphans, columns, and print stylesheets.

Sources and browser support

MDN: widows describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.