Codestin Search App

Description

The widows property controls how many lines of a block-level element are allowed to appear at the start of a new page, column, or other fragmentation context when the element is split. In practical terms, it prevents single or very few lines of a paragraph from being stranded alone at the top of a page or column after a break, preserving visual continuity and readability in paged or multicolumn layouts. This property is about typographic flow rather than visual styling — it influences where the rendering engine inserts a break when content is fragmented.

Because it only affects fragmented contexts, widows is most relevant for printed output, paged media, or multi-column layouts where content can be split across boundaries. When the constraint imposed by the property cannot be met in the remaining space, rendering engines typically move the entire element (or at least enough lines) to the next fragment to honor the rule. That behavior can change where breaks naturally occur, which may increase whitespace at the end of a fragment or shift subsequent content, so designers should consider its effect on overall pagination and flow.

This property interacts with other fragmentation and typographic rules. For example, orphans sets a related constraint for the bottom of a fragment and is often used in tandem with widows to maintain balanced paragraphs across breaks. Properties that affect line metrics, such as line-height, will influence how much space a paragraph consumes and therefore how the widows rule is applied. Likewise, fragmentation control properties like break-inside can interact with it, since forbidding breaks inside an element may force a different strategy for avoiding widowed lines.

In practice, designers use widows to improve legibility and professional polish in long-form content and printed materials. It’s a subtle but effective tool for preventing awkward single-line starts that disrupt reading. When applying it, test with realistic content and across the relevant output modes (paged print, multi-column, etc.), because enforcing the rule can cause unexpected redistribution of content and white space depending on the available fragment heights and other layout constraints.

Definition

Initial value: 2
Applies to: Block level elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.widows

Syntax

widows: <integer>

Values

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

Example

HTML

<div class="demo">

    <h1>CSS widows example</h1>



    <div class="columns">

        <p class="block widows-3">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet

            lectus vitae urna cursus dictum. Sed a ante nec nisl accumsan

            ullamcorper. Curabitur sit amet sapien et urna faucibus dictum. Morbi

            volutpat, nibh vitae gravida tincidunt, nunc nisl aliquet odio, at

            consequat nibh orci non lorem. Integer at lacus sed massa facilisis

            tincidunt. Proin vitae ex vitae nibh sollicitudin fringilla. Aliquam

            erat volutpat. Aenean id magna sed libero faucibus pharetra. Vivamus

            suscipit, turpis ut vulputate fermentum, est nisl mattis libero, id

            eleifend metus nibh vitae lorem.

        </p>



        <p class="block widows-1">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet

            lectus vitae urna cursus dictum. Sed a ante nec nisl accumsan

            ullamcorper. Curabitur sit amet sapien et urna faucibus dictum. Morbi

            volutpat, nibh vitae gravida tincidunt, nunc nisl aliquet odio, at

            consequat nibh orci non lorem. Integer at lacus sed massa facilisis

            tincidunt. Proin vitae ex vitae nibh sollicitudin fringilla. Aliquam

            erat volutpat. Aenean id magna sed libero faucibus pharetra. Vivamus

            suscipit, turpis ut vulputate fermentum, est nisl mattis libero, id

            eleifend metus nibh vitae lorem.

        </p>

    </div>



    <p class="caption">Top paragraph: <code>widows: 3</code>. Bottom paragraph: <code>widows: 1</code> (default).</p>

</div>

CSS

/* Basic page styles */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f6f7f8;
    color: #222;
    padding: 24px;
}

.demo {
    max-width: 840px;
    margin: 0 auto;
}

h1 {
    font-size: 20px;
    margin: 0 0 12px 0;
}

/* Multi-column container to demonstrate widows behavior */
.columns {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    padding: 18px;
    column-width: 280px;
    column-gap: 28px;
    -webkit-column-width: 280px;
    -webkit-column-gap: 28px;
    column-fill: auto;
    height: 360px; /* fix height so content flows into multiple columns */
    overflow: auto;
}

.block {
    margin: 0 0 18px 0;
    text-align: justify;
    line-height: 1.45;
    orphans: 1; /* keeps a minimum number of lines at the bottom of a column */
}

/* Different widows settings to compare behavior */
.widows-3 {
    widows: 3; /* do not allow fewer than 3 lines at the top of a new column */
}

.widows-1 {
    widows: 1; /* default  -  allows single-line start of a new column */
}

.caption {
    font-size: 13px;
    color: #555;
    margin-top: 12px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS widows property. Hover over a browser icon to see the version that first introduced support for this CSS property.