JavaScript HTML DOM Style widows 属性

  • widows 属性

    widows属性设置或返回必须在页面顶部可见的元素的最小行数(用于打印或打印预览)。widows属性仅影响块级元素。
    提示: widows:5表示在分页符下方必须至少显示5行。
    提示:请参阅孤立属性以设置或返回页面底部必须显示的元素的最小行数。
    更改widows并检查打印或打印预览:
    <!DOCTYPE html>
    <html>
    <head>
            <meta charset="utf-8">
        <title>蝴蝶教程(jc2182.com)</title>
            <script>
            function ChangeWidows() {
              document.getElementById("p1").style.widows = document.getElementById("widows").value;
            }
            </script>
            <style>
            .othercontent {
              width: 400px;
              border-top: 19cm solid #c3c3c3;
            }
    
            @page {
            /* set size of printed page */
              size: 21cm 27cm;
              margin-top: 2cm;
            }
    
            @media print {
              .widows {
                widows:2;
              }
            }
            </style>
    </head>
    <body>
    
    <div class="othercontent">
    <input id="widows" value="2">
    <button onclick="ChangeWidows();">更改windows</button>
    
    <p style="font-size:120%" id="p1">
    更改windows并查看打印预览。<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
    Line 8<br>
    </p>
    
    <div class="othercontent">
    
    </body>
    </html>
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    widows
    不支持
    支持
    不支持
    不支持
    支持
  • 语法

    返回widows属性:
    object.style.widows
    设置widows属性:
    object.style.widows = "number|initial|inherit"
  • 属性值

    描述
    number 一个整数,指定可见行的最小数量。 不允许使用负值。 默认值为2
    initial 设置这个属性为默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息
  • 技术细节

    项目 描述
    默认值: 2
    返回值: 一个字符串,表示在页面顶部打印的最小行数
    CSS版本 CSS2