此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

orphans

Limited availability

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

CSS 属性 orphans 用于设置区块容器中,在页面、区域或底部必须显示的最少行数。

在排版学中,孤行指的是段落的第一行单独出现在页面底部(段落的其余部分延续到下一页)。

语法

css
/* <integer> 值 */
orphans: 2;
orphans: 3;

/* 全局值 */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;

<integer>

在发生分段断开之前,段落底部所允许单独存在的最少行数。该值必须为正数。

形式定义

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

形式语法

orphans = 
<integer [1,∞]>

示例

设置最少孤行数为三行

HTML

html
<div>
  <p>这是第一段文字,包含一些内容。</p>
  <p>这是第二段文字,包含的内容比第一段更多。它用来演示孤行的处理方式。</p>
  <p>这是第三段文字。它的内容比第一段稍微多一些。</p>
</div>

CSS

css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

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

结果

规范

Specification
CSS Fragmentation Module Level 3
# widows-orphans

浏览器兼容性

参见