如何防止元素中的列中断？ [英] How to prevent column break within an element?

问题描述

请考虑以下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目前呈现的类似于以下内容：

As it stands, Firefox currently renders this similarly to the following:

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

请注意，第四个项目在第二列和第三列之间分割。如何防止这种情况？

Notice that the fourth item was split between the second and third column. How do I prevent that?

所需的渲染可能看起来更像：

The desired rendering might look something more like:

• 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

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

The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.

推荐答案

正确的方法是使用 break-within CSS属性：

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

$ b <使用Chrome时，我可以使用以下功能，但我无法对Firefox进行任何操作（请参阅Bug 549114 ）：

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

您可以为Firefox做必要的解决方法是包装你的不间断。

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

根据上面提到的错误报告，Firefox 20+支持 page-break-inside：avoid 作为避免元素中的列中断的机制，下面的代码片断表明它仍然不能使用列表：

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    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 ，但这会删除原始问题中显示的项目符号。

As others mention, you can do overflow: hidden or display: inline-block but this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

UPDATE 2 由于Firefox不会阻止打开 display：table 和 display：inline-block 一个可靠但非语义的解决方案是将每个列表项包含在自己的列表中，并应用样式规则：

UPDATE 2 Since Firefox does prevent breaking on display:table and display:inline-block a reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:

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

这篇关于如何防止元素中的列中断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！