如何防止 CSS 清單元素內出現分欄？

防止元素內的列中斷

目標是防止內容在元素內跨多個列中斷，確保所需的渲染。考慮下面的範例：

HTML:

<div>

CSS:

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

Firefox中的渲染：

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

目標是實現防止內容中斷的渲染，從而產生更具凝聚力的效果顯示：

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

或

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

解決方案在於利用break-inside CSS屬性：

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

所有主流瀏覽器都支援該屬性除了火狐瀏覽器。在 Firefox 中，可以採用使用表格的解決方法，但這不是理想的解決方案。

更新

Firefox 20 現在支援內部分頁：避免以防止列中斷，但以下程式碼顯示它仍然不能有效地使用清單：

CSS：

.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;
}

HTML：

<div>

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