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