widows

翻译不完整。 请帮助我们翻译这篇文章!

CSS属性 widows 可以用来设置一个块级容器在新的分页,区域或者顶部需要结合在一起的最小行数。

/* <integer> values */
widows: 2;
widows: 3;

/* Global values */
widows: inherit;
widows: initial;
widows: unset;

在排版中,widow 指的是在新页面顶部单独出现的段落的最后一行。(这一行来自于上一个页面的段落)

语法

<integer>
在一个片段打断后,新的片段顶部需要结合在一起的最小行数。该值必须为正值。

Formal definition

初始值2
适用元素block container elements
是否是继承属性yes
计算值as specified
Animation typediscrete

Formal syntax

<integer>

示例

控制列布局中的 widows

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 3
widows
Candidate Recommendation Extends widows to apply to any type of fragment, including pages, regions, or columns.
CSS Multi-column Layout Module
widows
Working Draft Recommendations to consider widows in relation to columns.
CSS Level 2 (Revision 1)
widows
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
widowsChrome Full support 25Edge Full support 12Firefox No support NoIE Full support 8Opera Full support 9.2Safari Full support 1.3WebView Android Full support ≤37Chrome Android Full support 25Firefox Android No support NoOpera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support

另请参见