CSS CSS3 列布局 – 孤行 / 孤子

在本文中，我们将介绍CSS3的列布局中的一个特性-孤行（widows）和孤子（orphans）。通过使用这两个属性，我们可以控制在多列布局中的文本行和文本块的分布，以创建更好的视觉效果和排版。

阅读更多：CSS 教程

孤行（widows）

孤行是指在多列布局中最后一列的第一行，与其余文本分离开的情况。通常情况下，我们希望在排版中避免出现孤行，以保持视觉的连贯性。

为了避免孤行的出现，我们可以使用CSS3的widows属性。该属性控制最后一列中文本块的行数。通过指定widows属性的值，我们可以确保指定数量的文本行始终保留在最后一列中。

以下是一个示例代码：

.column-layout {
  column-width: 200px;
  column-gap: 20px;
  widows: 3;
}

在上面的示例中，我们创建了一个列布局，并设置每一列的宽度为200像素，列之间的间距为20像素。通过设置widows属性的值为3，我们确保最后一列中至少有3行文本，从而避免了孤行的出现。

孤子是指在多列布局中其余文本块的最后一行，与下一列的文本块分离开的情况。同样地，我们通常希望避免孤子的出现，以保持排版的连贯性和整体性。

和孤行类似，我们可以使用CSS3的orphans属性来控制孤子的数量。该属性指定了其他文本块的最后一行在下一列中的最小行数。

以下是一个示例代码：

.column-layout {
  column-width: 200px;
  column-gap: 20px;
  orphans: 2;
}

在上面的示例中，我们创建了一个列布局，并设置每一列的宽度为200像素，列之间的间距为20像素。通过设置orphans属性的值为2，我们确保其他文本块的最后一行至少有2行文本，从而避免了孤子的出现。

在本文中，我们介绍了CSS3的列布局中孤行（widows）和孤子（orphans）的概念和用法。通过使用这两个属性，我们可以更好地控制在多列布局中文本行和文本块的分布。通过避免孤行和孤子的出现，我们可以创建更好的视觉效果和排版。

通过设置widows属性的值，我们可以确保最后一列中的文本行数量，从而避免孤行。通过设置orphans属性的值，我们可以控制其他文本块的最后一行在下一列中的最小行数，从而避免孤子的出现。

在使用这些属性时，我们可以根据具体的布局需求和视觉效果来设置合适的值。通过合理地使用孤行和孤子属性，我们可以提升网页排版的质量和用户体验。