CSS

widows

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; }

结果

规范

SpecificationStatusComment
CSS Fragmentation Module Level 3The definition of 'widows' in that specification.Candidate RecommendationExtends 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 RecommendationRecommendations to consider widows in relation to columns.
CSS Level 2 (Revision 1)The definition of 'widows' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support25(Yes)No support89.2No support

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNo support?No support??No support