在多列布局中處理內容中斷
多列布局中列框之間的內容中斷方式與分頁媒體中頁面之間的內容中斷方式相同。在這兩種情況下，您都可以使用 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;
}
當事情沒有按預期進行時
如果您有少量內容並試圖控制多個元素上的中斷，您的內容需要在某個地方中斷，因此您可能無法總是獲得預期的結果。在某種程度上，您對碎片化的使用始終是對瀏覽器的一種建議，即如果可能，以這種方式控制中斷。如果內容沒有在您預期的位置中斷，結果可能會不整潔，但內容仍然可供您的使用者使用。