如何防止元素内的分栏？

考虑以下 HTML：

<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>

以及以下 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

or

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

Edit:指定宽度只是为了演示不需要的渲染。在实际情况下，当然没有固定的宽度。

正确的方法是使用break-insideCSS 属性 https://www.w3.org/TR/css-break-3/#break-within:

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

不幸的是，截至 2021 年 10 月，Firefox 仍然不支持此功能 https://caniuse.com/mdn-css_properties_break-inside_multicol_context_column but 所有其他主要浏览器都支持它 https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside。在 Chrome 中，我可以使用上面的代码，但我无法在 Firefox 上使用任何东西（请参阅错误 549114 https://bugzilla.mozilla.org/show_bug.cgi?id=549114).

如有必要，您可以为 Firefox 采取的解决方法是将不间断的内容包装在表格中，但如果您可以避免的话，这将是一个非常非常糟糕的解决方案。

UPDATE

根据上述错误报告，Firefox 20+ 支持page-break-inside: avoid https://developer.mozilla.org/en-US/docs/Web/CSS/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>

正如其他人提到的，你可以这样做overflow: hidden or display: inline-block但这会删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。

UPDATE 2由于 Firefox 确实可以防止中断display:table and display:inline-block一个可靠但非语义的解决方案是将每个列表项包装在其自己的列表中并在那里应用样式规则：

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

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
    display:table;                      /* Actually FF 20+ */
}

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