widows

widows

When a paragraph is split over two pages in paged media, the widows CSS property defines the minimum number of lines that must be left at the top of the second page. In typography, a widow is the last line of a paragraph appearing alone at the top of a new page. Setting the widows property allows the prevention of single-line widows.

For non-paged media, like screen, the widows CSS property has no effect.

Initial value 2
Applies to block container elements
Inherited yes
Media visual, paged
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

/* <integer> values */
widows: 2;
widows: 3;

/* Global values */
widows: inherit;
widows: initial;
widows: unset;

Values

<integer>
Denotes the minimum number of lines that can stay alone on the top of a new page when a paragraph is split. If the value is not positive, the declaration is invalid.

Formal syntax

<integer>

Example

CSS

div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

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>

Result

Specifications

Specification Status Comment
CSS Fragmentation Module Level 3
The definition of 'widows' in that specification.
Candidate Recommendation Extends widows to apply to any type of fragment, like pages, regions or columns.
CSS Multi-column Layout Module
The definition of 'widows' in that specification.
Candidate Recommendation Recommend to consider widows in relation with columns
CSS Level 2 (Revision 1)
The definition of 'widows' in that specification.
Recommendation Initial definition

Browser Compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 25 (Yes) No support 8 9.2 No support
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support ? No support ? ? No support

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/widows

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部