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

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

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

当前回答

下面的代码可以防止元素内部的换行:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

2017-06-13 16:12:14

其他回答

我更新了实际答案。

这似乎是工作在firefox和chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

注意:float属性似乎是导致块行为的原因。

2014-03-23 12:26:30

火狐26似乎需要

page-break-inside: avoid;

Chrome 32需要

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

2014-01-13 15:14:29

这个答案可能只适用于某些情况;如果您为元素设置了高度，列样式将遵循此设置。通过将高度内的所有内容保存为一行。

我有一个像op一样的列表，但它包含两个元素，项目和按钮，用于对这些项目进行操作。我把它当作一个表<ul> - table， <li> - table-row， <div> - table-cell，把ul放在一个4列布局中。这些列有时会被项目和按钮分开。我使用的技巧是给Div元素一个行高来覆盖按钮。

2015-06-23 08:05:46

公认的答案已经过去两年了，而且情况似乎已经发生了变化。

本文解释了column-break-inside属性的用法。我不能说这与内部破解有何不同，因为只有后者在W3规范中被记录了下来。然而，Chrome和Firefox支持以下功能:

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

2013-11-06 21:53:25

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

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

推荐文章

最新文章

标签