Style widows 属性
widows 属性设置或返回一个元素必须在页面顶部的可见行的最小数量(用于打印或打印预览)。
widows 属性仅影响块级元素。
提示:widows:5 意味着至少有 5 行必须在分页符下面可见。
提示:orphans 属性设置或返回一个元素必须在页面底部的可见行的最小数量。
语法
设置 widows 属性:
Object.style.widows="number|inherit"
返回 widows 属性:
Object.style.widows
值 | 描述 |
---|---|
number | 一个规定可见行的最小数量的整数。默认值是 2。 |
inherit | widows 属性的值从父元素继承。 |
浏览器支持
只有 Opera 支持 widows 属性。
在线实例
实例
更改打印或打印预览的 widows 属性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>牛客教程(nowcoder.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{ /* 设置打印页面大小 */ 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();">修改窗口</button> <p style="font-size:120%" id="p1"> 修改窗口并且查看打印预览<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"></div> </div> </body> </html>