Widows Property
Last updated: 2026-09-13
widows Widows Property
widows controls the minimum number of lines from the start of a paragraph that must remain at the bottom of the previous page when printing, defaulting to 2. Paired with orphans, it prevents a paragraph's first line from being left alone at the bottom of a page (a 'widow'), keeping printed paragraphs intact.
| Category | |
|---|---|
| Initial Value | 2 |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
widows: <integer>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<integer> | Type | Minimum lines at the start of a paragraph |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| widows | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： widows and orphans are easy to confuse in CSS; remember 'widow = left standing at the start (page bottom)' to keep them straight.
❓ FAQ
QDo widows and orphans have to be set together?
ANo — they are independent paged-media properties. But they are usually set to the same value so both ends of a paragraph are handled consistently. For example, orphans: 3; widows: 3; keeps at least three lines at both ends for a uniform look. Setting only one leaves the other end still exposed to orphan/widow lines. Real projects often write both inside @media print.
QDoes widows affect on-screen display?
ANo. widows and orphans only apply in paged contexts (print, print preview, PDF export). Screens scroll continuously with no pagination, so the on-screen rendering is completely unaffected. To check the result, use the browser's print preview, or emulate print media in DevTools.
QWhich one controls the start of a paragraph, widows or orphans?
Awidows controls the paragraph start, keeping the first N lines from being left alone at the bottom of the previous page. orphans controls the paragraph end, keeping the last N lines from landing alone at the top of the next page. A helpful mnemonic: the widow stands at the 'start' (page bottom), the orphan at the 'end' (page top); they are usually set to the same value.
QHow do I fix a paragraph split when printing?
ABeyond orphans/widows controlling lines inside a paragraph, combine with break-inside: avoid so whole elements are not split across a page break. For long paragraphs, orphans: 3; widows: 3; prevents orphan/widow lines; for images, table rows, and other elements that must not span pages, break-inside: avoid moves them wholly to the next page.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
orphans Property
Control the minimum lines at the end of a paragraph
CSS Print Styles Tutorial
Master paged-media typography
