如何防止多列布局中的列表项内部出现分栏？

防止元素内的分栏

使用多列布局时，通常会遇到分栏意外分割元素的问题。当元素（例如列表项）太长而无法容纳在单个列中时，就会发生这种情况。

问题陈述

考虑以下 HTML 和 CSS：

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

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

在这种情况下，某些列表项可能会在列之间拆分，如下所示渲染：

• 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

解决方案：break-inside Property

这个问题的解决方案在于利用CSS的break-inside属性。通过在您希望防止破坏的元素上设置break-inside：avoid-column，您可以指示浏览器将该元素保留在单个列中。

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

这种方法得到了主流浏览器的广泛支持，包括 Chrome 和 Safari。然而，截至 2021 年 10 月，Firefox 仍然缺乏对break-inside 属性的支持。

Firefox 解决方法

对于 Firefox，存在涉及使用表的解决方法。但是，由于其负面影响，强烈建议不要使用此解决方案。

Firefox 20 中的分页内部支持

根据 Firefox 错误报告（错误 549114） ，Firefox 20 及更高版本现在支持使用 page-break-inside:void 来防止元素内出现分栏。但是，如以下代码片段所示，此方法尚未完全解决列表的问题：

.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中文网其他相关文章！