CSS widows属性

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