如何防止元素内的列中断？

Question

考虑以下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

要么

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

编辑： 仅指定宽度以演示不需要的渲染。在实际情况下，当然没有固定的宽度。

Answer 1

正确的方法是使用闯入式CSS属性：

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

不幸的是，截至2019年10月，Firefox不支持此功能，但其他所有主流浏览器均支持此功能。使用Chrome，我可以使用上面的代码，但是无法使Firefox正常运行。

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

更新

根据上面提到的错误报告，Firefox 20+支持page-break-inside:avoid作为一种机制来避免元素内的列中断，但是以下代码片段展示了Firefox 20+ 仍不能与列表一起使用：

.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，display: inline- block但还是可以删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。

更新2 由于Firefox确实可以防止中断，display:table因此display:inline- block可靠的但非语义的解决方案是将每个列表项包装在其自己的列表中，然后在此处应用样式规则：

.x {

    -moz-column-count: 3;

    -webkit-column-count: 3;

    column-count: 3;

    width: 30em;

}



.x ul {

    margin: 0;

    -webkit-column-break-inside: avoid; /* Chrome, Safari */

    page-break-inside: avoid;           /* Theoretically FF 20+ */

    break-inside: avoid-column;         /* 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>