孤行与寡行控制：`orphans` 与 `widows` 属性在分页断点处的计算逻辑

大家好，今天我们来深入探讨CSS中的 orphans 和 widows 属性，这两个属性主要用于控制分页、分栏或换行时，元素内部的文本行数分布，防止出现孤行和寡行的情况，从而提升文档的可读性和美观性。

1. 什么是孤行和寡行？

在排版领域，孤行（Orphan）和寡行（Widow）指的是段落的最后一行出现在下一页的开头（孤行），或者段落的第一行出现在上一页的末尾（寡行）。

寡行 (Widow): 指的是一个段落的第一行单独出现在页面的底部。想象一下，一个段落只有一行内容落在了上一页的结尾，这会让读者感觉突兀，影响阅读体验。
孤行 (Orphan): 指的是一个段落的最后一行单独出现在页面的顶部。这同样会造成视觉上的不协调，破坏排版的美观性。

2. `orphans` 和 `widows` 属性的作用

orphans 和 widows 属性用于指定一个块级元素在分页、分栏或换行时，必须保留在页面顶部或底部的最少行数。

orphans 属性: 指定一个块级元素在页面底部必须保留的最少行数。也就是说，如果一个段落的剩余行数小于 orphans 的值，那么整个段落将被移到下一页。
widows 属性: 指定一个块级元素在页面顶部必须保留的最少行数。如果一个段落的行数小于 widows 的值，那么整个段落将被移到上一页（或者与前面的内容合并，如果可行）。

3. 语法和取值

/* 语法 */
orphans: <integer> | inherit | initial | unset;
widows: <integer> | inherit | initial | unset;

/* 取值 */
/* <integer>: 指定一个整数值，表示最少行数 */
orphans: 2; /* 至少保留2行在页面底部 */
widows: 3; /* 至少保留3行在页面顶部 */

/* 关键字 */
orphans: inherit; /* 继承父元素的orphans属性 */
widows: initial; /* 设置为初始值，通常为2 */
orphans: initial;
widows: inherit;
orphans: unset; /* 移除属性，相当于auto或inherit */
widows: unset;

4. 默认值

orphans: 2
widows: 2

这意味着，默认情况下，浏览器会尝试确保每个段落至少有两行保留在页面底部和顶部。

5. 适用元素

orphans 和 widows 属性适用于块级元素，例如 <p>, <div>, <h1> 到 <h6>, <ul>, <ol>, <li> 等。它们对行内元素无效。

6. 工作原理和计算逻辑

orphans 和 widows 的计算逻辑涉及分页断点的确定和行数的统计。

分页断点确定: 浏览器或排版引擎会根据页面大小、边距、元素高度等因素确定分页断点。这通常是一个复杂的过程，涉及到布局计算和优化。
行数统计: 在确定分页断点后，浏览器会统计每个块级元素在断点前后的行数。这需要考虑到文本的换行、字体大小、行高、盒模型等因素。
orphans 检查: 对于一个块级元素，如果在分页断点前，剩余的行数小于 orphans 的值，那么整个元素会强制移到下一页。
widows 检查: 对于一个块级元素，如果在分页断点后，开始的行数小于 widows 的值，那么整个元素会强制移到上一页（或者与前面的内容合并，如果可行）。

7. 示例代码和分析

7.1 简单示例

<!DOCTYPE html>
<html>
<head>
<title>Orphans and Widows Example</title>
<style>
body {
    width: 200px; /* 模拟较窄的页面 */
    margin: 20px;
    font-size: 16px;
    line-height: 1.5;
}

p {
    orphans: 3;
    widows: 3;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

/* 模拟分页 */
@media print {
    body {
        width: auto; /* 恢复正常宽度 */
    }
    p {
        page-break-inside: avoid; /* 尽量避免在段落内部断页 */
        page-break-after: always; /* 每个段落后强制分页 */
    }
}
</style>
</head>
<body>

<p>
This is the first paragraph. It contains several lines of text to demonstrate the orphans and widows properties.  We want to see how these properties affect the pagination of this paragraph.  The goal is to avoid having only one or two lines at the bottom or top of a page.
</p>

<p>
This is the second paragraph.  It's also quite long, designed to span multiple pages when printed.  The 'orphans' property ensures a minimum number of lines stay together at the bottom of a page, while the 'widows' property does the same for the top of a page.  This helps to maintain readability and visual consistency.
</p>

</body>
</html>

在这个例子中，我们设置了 orphans: 3 和 widows: 3。这意味着每个段落至少要保留 3 行在页面底部和顶部。由于使用了 @media print 媒体查询和 page-break-after: always，每个段落都会强制分页。

运行这个例子，并在浏览器中选择“打印预览”或将其导出为 PDF，观察分页效果。你会发现，如果一个段落的行数不足以满足 orphans 和 widows 的要求，整个段落会被移动到下一页，以避免出现孤行和寡行。

7.2 复杂示例：结合 `page-break-inside`

<!DOCTYPE html>
<html>
<head>
<title>Orphans and Widows Example with page-break-inside</title>
<style>
body {
    width: 200px; /* 模拟较窄的页面 */
    margin: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.container {
    orphans: 2;
    widows: 2;
    border: 1px solid blue;
    padding: 10px;
}

p {
    orphans: 3;
    widows: 3;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    page-break-inside: avoid; /* 尽量避免在段落内部断页 */
}

/* 模拟分页 */
@media print {
    body {
        width: auto; /* 恢复正常宽度 */
    }
    .container {
        page-break-after: always;
    }

}
</style>
</head>
<body>

<div class="container">
    <p>
    This is the first paragraph inside the container. It contains several lines of text to demonstrate the orphans and widows properties.  We want to see how these properties affect the pagination of this paragraph.  The goal is to avoid having only one or two lines at the bottom or top of a page.
    </p>

    <p>
    This is the second paragraph inside the container.  It's also quite long, designed to span multiple pages when printed.  The 'orphans' property ensures a minimum number of lines stay together at the bottom of a page, while the 'widows' property does the same for the top of a page.  This helps to maintain readability and visual consistency.
    </p>
</div>

<div class="container">
    <p>
    This is another paragraph inside another container. It is here to show how the `page-break-after` on the container affects the output.
    </p>
</div>

</body>
</html>

在这个例子中，我们引入了一个 .container 元素，并设置了 .container 的 orphans 和 widows 属性。同时，我们还为 <p> 元素设置了 page-break-inside: avoid，以尽量避免在段落内部断页。

运行这个例子，并进行打印预览或导出为 PDF，观察分页效果。你会发现，.container 的 orphans 和 widows 属性会影响整个容器的分页行为，而 <p> 元素的 page-break-inside: avoid 会尽量避免在段落内部断页，orphans 和 widows 属性则确保每个段落至少有 3 行保留在页面底部和顶部。

7.3 表格形式总结示例

属性	描述	默认值	适用元素
`orphans`	指定一个块级元素在页面底部必须保留的最少行数。如果一个段落的剩余行数小于 `orphans` 的值，那么整个段落将被移到下一页。	`2`	块级元素
`widows`	指定一个块级元素在页面顶部必须保留的最少行数。如果一个段落的行数小于 `widows` 的值，那么整个段落将被移到上一页（或者与前面的内容合并，如果可行）。	`2`	块级元素
`page-break-inside`	指定元素内部是否允许分页。 `avoid` 表示尽量避免在元素内部断页。	`auto`	块级元素
`page-break-after`	指定元素之后是否要分页。`always` 表示总是分页。	`auto`	块级元素

8. 注意事项

orphans 和 widows 属性只有在分页、分栏或换行时才会生效。
这两个属性的值越大，越能保证排版的美观性，但同时也可能导致页面出现空白。
page-break-inside, page-break-before, 和 page-break-after 属性会影响分页断点的确定，从而影响 orphans 和 widows 的计算。
复杂的布局和样式可能会使 orphans 和 widows 的行为变得难以预测，需要仔细测试和调整。
orphans 和 widows 主要用于打印样式和生成PDF等场景，在屏幕显示上可能效果不明显。
一些浏览器对于这些属性的支持可能存在差异，需要进行兼容性测试。

9. 实际应用场景

书籍排版: 在书籍排版中，使用 orphans 和 widows 可以避免出现孤行和寡行，提高书籍的可读性和美观性。
报告生成: 在生成报告时，使用 orphans 和 widows 可以确保每个段落都完整地显示在页面上，避免信息丢失或断裂。
打印样式: 为网站或应用程序创建打印样式时，可以使用 orphans 和 widows 来优化打印输出效果。
PDF 生成: 使用 CSS 生成 PDF 文档时，orphans 和 widows 属性可以帮助控制分页行为，生成高质量的 PDF 文档。

10. 与其他属性的交互

orphans 和 widows 属性经常与其他 CSS 属性一起使用，以实现更精细的排版控制。一些常见的交互包括：

page-break-before、page-break-after、page-break-inside: 这些属性用于控制元素前后和内部的分页行为，会影响 orphans 和 widows 的计算。
margin、padding、border: 这些盒模型属性会影响元素的高度和分页断点的确定，从而影响 orphans 和 widows 的计算。
line-height、font-size: 这些文本属性会影响每行的文本高度和行数，从而影响 orphans 和 widows 的计算。
height、min-height、max-height: 这些属性直接控制元素的高度，从而影响分页和 orphans 和 widows 的行为。

11. 浏览器兼容性

orphans 和 widows 属性的浏览器兼容性相对较好，主流浏览器都支持这两个属性。但是，在某些旧版本的浏览器中，可能存在一些兼容性问题。建议在使用这些属性时，进行兼容性测试，并根据需要提供备选方案。

12. 高级技巧

使用 CSS 预处理器: 可以使用 CSS 预处理器（如 Sass 或 Less）来简化 orphans 和 widows 的设置。例如，可以创建一个 mixin 来统一设置 orphans 和 widows 的值。
```
@mixin orphans-and-widows($value) {
    orphans: $value;
    widows: $value;
}

p {
    @include orphans-and-widows(3);
}
```
结合 JavaScript: 可以使用 JavaScript 来动态调整 orphans 和 widows 的值，以适应不同的屏幕尺寸和设备。例如，可以根据窗口宽度来调整 orphans 和 widows 的值，以优化在移动设备上的显示效果。

13. 常见问题及解决方案

orphans 和 widows 属性不生效:
- 原因: 确保属性应用在块级元素上。检查是否存在其他 CSS 属性（如 float 或 display: inline-block）影响了元素的分页行为。
- 解决方案: 确认元素是块级元素，检查并移除可能冲突的 CSS 属性，尝试使用 !important 强制应用样式。
分页效果不符合预期:
- 原因: 复杂的布局和样式可能会使分页行为变得难以预测。
- 解决方案: 简化布局和样式，仔细测试和调整 orphans、widows 和其他分页相关属性的值。
浏览器兼容性问题:
- 原因: 某些旧版本的浏览器可能不支持 orphans 和 widows 属性，或者存在兼容性问题。
- 解决方案: 进行兼容性测试，并根据需要提供备选方案。例如，可以使用 JavaScript 来模拟 orphans 和 widows 的效果。

总结：掌握孤行寡行控制，提升排版质量

orphans 和 widows 属性是CSS中用于控制分页断点处文本行数分布的重要工具。通过合理使用这两个属性，我们可以避免出现孤行和寡行，提升文档的可读性和美观性。理解其工作原理和计算逻辑，并结合实际应用场景进行实践，能够帮助我们更好地掌握排版技巧，创造出更专业的文档。

更多IT精英技术系列讲座，到智猿学院