widows 属性指定块级容器中留在页面或者列顶部的最小行数,其余行留在上一页或者列上。
widows是出现在页面或者列顶部的单个分隔行或者单词。
此属性通常与@media 规则一起使用。
widows 属性有一个姊妹属性:orphans,它指定留在上一页/列末尾的行数。
换句话说,前一页或者前一列的文本行是孤行,剩下的留在新页或者新列顶部的行是寡行。
负值无效。
| 初始值 | 2 |
|---|---|
| 应用于 | 阻止容器元素。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS2. |
| DOM 语法 | object.style.widows =“3”; |
CSS widows属性值说明
| 值 | 描述 |
|---|---|
| <integer> | 指定可以在页面或者列开始时留下的行数。负值无效。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
widows: <integer> | initial | inherit;
widows属性例子:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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 属性示例</h2>
<div class="example">
<div class="text">
<p>
今天很残酷,明天很残酷,后天很美好。很多人死在了明天的夜里。
经历过风雨,才懂得阳光的温暖。
生活终归还得继续。
</p>
<p>
经历过风雨,才懂得阳光的温暖。
</p>
<p>
今天很残酷,明天很残酷,后天很美好。很多人死在了明天的夜里。
经历过风雨,才懂得阳光的温暖。
生活终归还得继续。
</p>
<p>
今天很残酷,明天很残酷,后天很美好。很多人死在了明天的夜里。
经历过风雨,才懂得阳光的温暖。
生活终归还得继续。
</p>
<p>
今天很残酷,明天很残酷,后天很美好。很多人死在了明天的夜里。
经历过风雨,才懂得阳光的温暖。
生活终归还得继续。
</p>
</div>
</div>
</body>
</html>
在给定的示例中,粗体文本显示了widows。
日期:2020-06-02 22:14:52 来源:oir作者:oir
