orphans 属性用于指定块级容器中可以留在页面或者列底部的最小行数。
孤儿是段落的第一行,单独出现在页面底部,该段落在下一页继续。
orphans 属性通常与@media 规则一起使用,用于指定页面末尾允许的孤立数量。
它还可以用于网页和数字文档的多列布局。
在这种情况下,它将指定列末尾允许的行数。
orphans 属性有一个姊妹属性:widows,它指定下一页/列开头的行数。
| 初始值 | 2 |
|---|---|
| 应用于 | 阻止容器元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.Orphans =“2”; |
CSS orphans 属性值说明
| 值 | 描述 |
|---|---|
| <integer> | 指定可以在页面或者列结束时留下的行数。负值无效。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
orphans: <integer> | initial | inherit;
orphans属性的例子:
<!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 {
orphans: 4;
}
</style>
</head>
<body>
<h2>Orphans 属性示例</h2>
<div class="example">
<div class="text">
<p>
经历过风雨,才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
<p>
<span style="color: #8ebf42; font-weight: bold">经历过风雨,才懂得阳光的温暖。经历过风雨,才懂得阳光的温暖。</span>
</p>
<p>
经历过风雨,才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
<p>
经历过风雨,才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
<p>
经历过风雨,才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</p>
</div>
</div>
</body>
</html>
在给定的示例中,以绿色突出显示的段落中的四行位于第一列的末尾。
日期:2020-06-02 22:14:41 来源:oir作者:oir
