如何防止多列佈局中的清單項目內部出現分欄？

防止元素內的分欄

使用多列佈局時，通常會遇到分欄意外分割元素的問題。當元素（例如列表項目）太長而無法容納在單一列中時，就會發生這種情況。

問題陳述

考慮以下 HTML 和 CSS：

在這種情況下，某些清單項目可能會在列之間拆分，如下所示渲染：

目標是防止這種分裂，實現更理想的渲染，如：

解：break-inside Property

這個問題的解決方案在於利用CSS的break-inside屬性。透過在您希望防止破壞的元素上設定break-inside：avoid-column，您可以指示瀏覽器將該元素保留在單一列中。

這種方法得到了主流瀏覽器的廣泛支持，包括 Chrome 和 Safari。然而，截至 2021 年 10 月，Firefox 仍缺乏對break-inside 屬性的支援。

Firefox 解決方法

對於 Firefox，存在涉及使用表的解決方法。但是，由於其負面影響，強烈建議不要使用此解決方案。

Firefox 20 中的分頁內部支援

根據Firefox 錯誤報告（錯誤549114） ，Firefox 20 及更高版本現在支援使用page-breakinside:void來防止元素內出現分欄。但是，如以下程式碼片段所示，此方法尚未完全解決清單的問題：

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