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