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

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

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

当前回答

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

我用

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

2018-06-07 09:50:21

其他回答

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

-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

试试这个:

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

.．.对我有用，也许对你也有用。

2020-08-12 11:21:37

我更新了实际答案。

这似乎是工作在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

添加;

display: inline-block;

子元素将防止它们在列之间被分割。

2012-05-09 13:07:38

这在2015年很适合我:

李{ -webkit-column-break-inside:避免; /* Chrome, Safari, Opera */ page-break-inside:避免; /* Firefox */ break-inside:避免; /*即10+ */ ｝以下方式{ -moz-column-count: 3; column-count: 3; 宽度:30 em; ｝ < div class = ' x ' > < ul > <李> 1号李< / > <李>二李< / > <李> 3号李< / > <li> 4号有点长</li> <李> 5号李< / > < / ul > < / div >

2015-12-21 11:12:47

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

推荐文章

最新文章

标签