widows

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

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

语法

<integer>

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

形式定义

初始值2
适用元素区块容器元素
是否是继承属性
计算值as specified
动画类型按计算值的类型

形式语法

示例

控制列布局中的 widows

HTML

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

css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

结果

规范

Specification
CSS Fragmentation Module Level 3
# widows-orphans
CSS Multi-column Layout Module Level 1
# filling-columns

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
widows

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见