The orphans
CSS property specifies the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column. This property is normally used to control how breaks occur.
/* <integer> values */ orphans: 2; orphans: 3; /* Global values */ orphans: inherit; orphans: initial; orphans: unset;
In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page.
Initial value | 2 |
---|---|
Applies to | block container elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Syntax
Values
<integer>
- The minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. The value must be positive.
Formal syntax
<integer>
Example
HTML
<div> <p>This is the first paragraph containing some text.</p> <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p> <p>This is the third paragraph. It has a little bit more text than the first one.</p> </div>
CSS
div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3 The definition of 'orphans' in that specification. |
Candidate Recommendation | Extends orphans to apply to any type of fragment, including pages, regions, or columns. |
CSS Multi-column Layout Module The definition of 'orphans' in that specification. |
Candidate Recommendation | Recommendations to consider orphans in relation to columns. |
CSS Level 2 (Revision 1) The definition of 'orphans' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 25 | Yes | No | 8 | 9.2 | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 25 | ? | Yes | No | ? | ? | No |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
rwilson.or,
erikadoyle,
Sebastianz,
teoli,
curtisj44,
cvrebert,
m_gol,
kscarfone,
Sheppy,
ethertank,
FredB,
nimbupani,
mmclark,
MatrixFrog
Last updated by:
fscholz,