如何防止 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中文网其他相关文章！