CSS

orphans

orphans

orphans CSS 属性指定块容器在页、区域或列的底部显示的最小行数。

/* <integer> values */ orphans: 2; orphans: 3; /* Global values */ orphans: inherit; orphans: initial; orphans: unset;

显示时,orphan出现在页面底部的段落的第一行。

初始值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; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; }

结果

规范

SpecificationStatusComment
CSS Fragmentation Module Level 3The definition of 'orphans' in that specification.Candidate RecommendationExtends orphans to apply to any type of fragment, including pages, regions, or columns.
CSS Multi-column Layout ModuleThe definition of 'orphans' in that specification.Candidate RecommendationRecommendations to consider orphans in relation to columns.
CSS Level 2 (Revision 1)The definition of 'orphans' in that specification.RecommendationInitial definition.

浏览器兼容性

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

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support25.0(Yes)No support??No support