在多列布局中处理内容中断
多列布局中列框之间的内容中断方式与分页媒体中页面之间的内容中断方式相同。在这两种情况下，您都可以使用 CSS fragmentation 模块的属性来控制内容的断裂位置和方式。在本指南中，我们将了解碎片化在多列容器或简称多列容器中的工作方式。
碎片化基础
CSS 碎片化模块详细说明了内容如何在碎片化容器或碎片容器之间断裂。另一方面，多列布局模块定义了 break-after、break-before 和 break-inside 属性，这些属性提供了对列内和列间的一些控制。在多列布局中，列框是一个碎片容器。
列框可以包含其他标记，并且在许多地方中断是不理想的。例如，我们通常更希望图像的标题不要与它所引用的图像分离到新列中。此外，以标题结束一列看起来很奇怪。多列碎片化属性为我们提供了对此进行控制的方法。
我们可能希望在各种地方控制中断
- 框内中断，例如在 figure 元素内。
- 框前后中断，这包括我们上面提到的标题示例。
- 行间中断。
框内中断
要控制框内中断，请使用 break-inside 属性。此属性接受以下值：
autoavoidavoid-pageavoid-columnavoid-region
在下面的示例中，我们已将 break-inside 应用于 figure 元素，以防止标题与图像分离。
<div class="container">
<figure>
<img
alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
<figcaption>Balloons</figcaption>
</figure>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
img {
max-width: 100%;
}
figure {
margin: 0;
break-inside: avoid;
}
figcaption {
font-weight: bold;
border-bottom: 2px solid #999999;
}
.container {
column-width: 200px;
}
框前后中断
break-before 和 break-after 属性用于控制元素前后中断。在多列上下文中，它们接受以下值：
- auto
- avoid
- avoid-column
- column
在下一个示例中，我们强制在 h2 元素之前进行列中断。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon.
</p>
<h2>My heading</h2>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
break-before: column;
}
行间中断
orphans 和 widows 属性是 CSS 碎片化模块的一部分，它们也很有用，值得一提。orphans 属性控制在碎片末尾单独留下的行数。widows 属性控制在碎片开头单独留下的行数。
orphans 和 widows 属性接受一个 <integer> 作为值，它分别表示在碎片末尾和开头保持在一起的行数。请注意，这些属性仅在块容器（例如段落）内起作用。如果块中的行数少于您指定的值，则所有行都将保持在一起。
在下面的示例中，我们使用 orphans 属性来控制列底部剩余的行数。您可以更改该值以查看其对内容中断的影响。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
orphans: 3;
}
当事情没有按预期进行时
如果您有少量内容并试图控制多个元素上的中断，您的内容需要在某个地方中断，因此您可能无法总是获得预期的结果。在某种程度上，您对碎片化的使用始终是对浏览器的一种建议，即如果可能，以这种方式控制中断。如果内容没有在您预期的位置中断，结果可能会不整洁，但内容仍然可供您的用户使用。