widows
Quick Summary for widows
The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
Code Usage for widows
/* <integer> values */ widows: 2; widows: 3;  /* Global values */ widows: inherit; widows: initial; widows: revert; widows: unset; 
More Details for widows

widows

The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.

/* <integer> values */ widows: 2; widows: 3;  /* Global values */ widows: inherit; widows: initial; widows: revert; widows: unset; 

In typography, a widow is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)

Syntax

Values

<integer>

The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

Formal definition

Initial value2
Applies toblock container elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

<integer>

Examples

Controlling column widows

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;   columns: 3;   widows: 2; }  p {   background-color: #8ca0ff; }  p:first-child {   margin-top: 0; } 
Result

Specifications

Specification
CSS Fragmentation Module Level 3 # widows-orphans
CSS Multi-column Layout Module Level 2 # filling-columns

See also

orphans Paged media

Last modified: Oct 3, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Bajo
Random CSS Property

counters()

The counters() CSS function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The counters() function has two forms: counters(name, string) or counters(name, string, style). It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to decimal if no style is specified.
counters() css reference