widows
widows 属性指定块中的容器线显示的最小数目。此属性通常用于控制中断发生。
/* <integer> values */
widows: 2;
widows: 3;
/* Global values */
widows: inherit;
widows: initial;
widows: unset;显示时，widow是单独出现在页面顶部的段落的最后一行。
初始值 | 2 |
|---|---|
应用于 | block container elements |
是否继承 | yes |
适用媒体 | visual |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | per grammar |
语法
取值
<integer>中断操作后，保留在新片段顶部的最小行数。该值必须是正值。
形式语法
<integer>例
HTML
<div>
<p>This is the first paragraph containing some text.</p>
<p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p>
<p>This is the third paragraph. It has a little bit more text than the first one.</p>
</div>CSS
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Fragmentation Module Level 3The definition of 'widows' in that specification. | Candidate Recommendation | Extends widows to apply to any type of fragment, including pages, regions, or columns. |
CSS Multi-column Layout ModuleThe definition of 'widows' in that specification. | Candidate Recommendation | Recommendations to consider widows in relation to columns. |
CSS Level 2 (Revision 1)The definition of 'widows' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 25 | (Yes) | No support | 8 | 9.2 | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | No support | ? | No support | ? | ? | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
