在多列布局中处理内容断裂

在多列布局中，列框之间的内容断裂方式与分页媒体中页面之间的内容断裂方式相同。在这两种情况下，您可以使用 CSS 分割模块的属性来控制内容断裂的位置和方式。在本指南中，我们将了解分割在多列容器或简称为多列容器中的工作原理。

分段基础

CSS 分割模块提供了有关内容如何在分割容器或碎片容器之间断裂的详细信息。另一方面，多列布局模块定义了 break-after、break-before 和 break-inside 属性，这些属性提供了一些在列内和列之间进行控制的方法。在多列布局中，列框是一个碎片容器。

列框可以包含其他标记，并且在许多地方断裂并不是理想的。例如，我们通常希望图像的标题不要与它所指的图像分开到新的一列中。此外，用标题结束一列看起来很奇怪。多列分割属性为我们提供了一些控制这些问题的方法。

在许多地方，我们可能希望控制断裂

要控制盒子内部的断裂，请使用 break-inside 属性。此属性接受以下值：

在下面的示例中，我们已将 break-inside 应用于 figure 元素，以防止标题与图像分开。

break-before 和 break-after 属性用于控制元素之前和之后的断裂。它们在多列上下文中接受以下值：

在下一个示例中，我们正在强制在 h2 元素之前进行列断裂。

CSS 分割模块的一部分 orphans 和 widows 属性也很有用，值得一提。orphans 属性控制留在碎片末尾的孤立行数。widows 属性控制留在碎片开头的孤立行数。

orphans 和 widows 属性接受一个 <integer> 作为值，它分别表示在碎片末尾和开头要保持在一起的行数。请注意，这些属性仅在块级容器内工作，例如段落。如果块中的行数少于您指定的值，所有行都会保持在一起。

在下面的示例中，我们使用 orphans 属性来控制留在列底部的孤立行数。您可以更改该值以查看对内容断裂的影响。

如果您有少量内容并试图控制多个元素的断裂，那么您的内容需要在某个地方断裂，因此您可能无法始终获得预期的结果。在某种程度上，您对分割的使用始终是对浏览器的建议，以这种方式控制断裂，如果可能的话。如果内容没有按预期断裂，结果可能不整齐，但内容仍然可供用户使用。