css orphans介绍与实例

时间:2023-05-09 14:02:17

orphans 是一个 CSS 页面属性,用于指定在页面底部最后一行的文本行数。如果页面底部不足指定行数,则会将最后几行移动到下一页,以避免出现孤行(orphan)。

该属性接受一个正整数作为值,表示页面底部至少应有多少行文本。默认值为 2,表示至少保留两行文本,如果少于两行则移动到下一页。

以下是一个 orphans 的示例:

<!DOCTYPE html>
<html>
<head>
<title>Orphans Example</title>
<style>
@page {
orphans: 3;
}
</style>
</head>
<body>
<h1>Page Content</h1>
<p>This is some text that will be printed.</p>
<p>This is some more text that will be printed.</p>
<p>This is even more text that will be printed.</p>
<p>This is the last paragraph on the page.</p>
</body>
</html>

在上面的示例中,使用 @page 规则为所有页面设置 orphans: 3,表示页面底部至少应保留三行文本。如果最后一行不满足三行,则会将最后几行移动到下一页。

相关词 orphans