小编典典

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

html

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

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


阅读 378

收藏
2020-05-10

共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: hiddendisplay: 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>
2020-05-10