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

考虑下面的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

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

当前回答

2019年，在Chrome、Firefox和Opera上(在许多其他不成功的尝试之后)，这样做对我来说是有效的:

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

2019-03-12 21:05:03

其他回答

将following设置为你不想破坏的元素的样式:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

2013-07-02 00:13:59

我在使用卡片列时也遇到了同样的问题

我用

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

2018-06-07 09:50:21

Firefox现在支持这个:

page-break-inside: avoid;

这解决了元素在列之间断开的问题。

2013-06-29 11:00:30

截至2014年10月，火狐和IE 10-11的破解似乎仍有问题。然而，在元素中添加overflow: hidden以及break-inside: avoid似乎可以在Firefox和IE 10-11中正常工作。我目前使用:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

2014-10-29 18:21:10

2019年，在Chrome、Firefox和Opera上(在许多其他不成功的尝试之后)，这样做对我来说是有效的:

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

2019-03-12 21:05:03

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

推荐文章

最新文章

标签