widows
CSS widows Property
The widows property specifies the minimum number of lines of a block-level container that are left at the top of a page or column, leaving the remaining lines on the previous page or column.
A widow is a single, separated line or word which appears at the top of the page or column.
This property is usually used with the @media rule.
The widows property has a sister property: the orphans, which specifies the number of lines that stay at the end of the previous page/column. In other words, the lines of the text in the previous page or column is the orphans, the rest of the lines left at the top of the new page or column is the widows.
Negative values are invalid.
| 类目 | 类目 |
|---|---|
| Initial Value | 2 |
| Applies to | Block container elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.widows = “3”; |
Syntax
Syntax
widows: <integer> | initial | inherit;
Example of the widows property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: Roboto, Helvetica, sans-serif;
}
hr {
margin: 50px 0;
}
.example {
margin: 30px auto;
width: 800px;
}
.text {
padding: 20px;
background-color: #fff;
-moz-columns: 10em 3;
-webkit-columns: 10em 3;
columns: 10em 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
</style>
</head>
<body>
<h2>Widows property example</h2>
<div class="example">
<div class="text">
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</p>
<p>
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</body>
</html>
In the given example the bold text shows the widows.
Values
Values
| Value | Description |
|---|---|
| <integer> | Specifies the number of lines that can be left at the start of a page or column. Negative values are invalid. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |