如何防止清單項目在多列佈局中跨列破壞？

防止元素內的列中斷

在多列佈局中，您可能會遇到單一清單項目跨列中斷的情況。為了防止這種不必要的行為，可以使用break-inside CSS屬性。

使用break-inside

具體來說，為列表項目元素設定break-inside：avoid-column將確保它們在單一列中保持完整：

.x li {
    break-inside: avoid-column;
}

Firefox 相容性問題

不幸的是，截至2021 年10 月，Firefox不支援闖入屬性。雖然您可以在其他主要瀏覽器中使用它，但您需要 Firefox 的解決方法。

Firefox 的解決方法

對於Firefox 來說，一個不太理想的解決方案是將不間斷的內容包裝在表格中：

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20支援（部分）

Firefox 20引入了對page-break-inside：避免，但它並不能完全解決清單的問題。以下程式碼顯示它仍然會破壞項目：

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

以上是如何防止清單項目在多列佈局中跨列破壞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！