CSS orphans属性

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