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

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

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

206825 次浏览
小开
最佳答案

正确的方法是使用break-inside CSS属性:

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

不幸的是，截至2021年10月，这在Firefox中仍然不支持改为其他所有主流浏览器都支持它。使用Chrome，我能够使用上面的代码，但我不能使任何工作的Firefox (参见Bug 549114)。

如果有必要的话，Firefox的解决方法是将不中断的内容包装在一个表中，但如果可以避免的话，这是一个非常非常糟糕的解决方案。

更新

根据上面提到的错误报告，Firefox 20+支持page-break-inside: avoid作为一种机制来避免元素内部的换行，但下面的代码片段表明它仍然不能用于列表:

.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: hidden或display: inline-block，但这删除了原始问题中显示的项目符号。你的解决方案会根据你的目标而有所不同。

由于Firefox确实阻止了display:table和display:inline-block上的破坏，一个可靠但非语义的解决方案是将每个列表项包装在自己的列表中，并在那里应用样式规则:

.x {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
width: 30em;
}


.x ul {
margin: 0;
page-break-inside: avoid;           /* Theoretically FF 20+ */
break-inside: avoid-column;         /* Chrome, Safari, 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>

小开

对于Firefox来说，一个可能的解决方法是将CSS属性“display”设置为“table”，即您不希望在元素内部有断点的元素。我不知道它是否适用于LI标记(您可能会丢失list -item样式)，但它适用于P标记。

小开

添加;

display: inline-block;

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

小开

Firefox现在支持这个:

page-break-inside: avoid;

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

小开

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

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

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

这篇文章解释了column-break-inside属性的用法。我不能说这与break-inside如何或为什么不同，因为只有后者似乎在W3规范中被记录。然而，Chrome和Firefox支持以下内容:

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

火狐26似乎需要

page-break-inside: avoid;

Chrome 32需要

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

我更新了实际答案。

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

.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 */
}

注意: 浮动属性似乎是使块行为的一个。

小开

截至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;
小开

我只是修复了一些__abc0，它们通过添加被分割到下一列

overflow: auto

divs。

*意识到它只修复它在Firefox!

小开

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

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

小开

我想我也遇到了同样的问题，并找到了解决方案:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;

也工作在FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

小开

这在2015年很适合我:

. 
li {
-webkit-column-break-inside: avoid;
/* Chrome, Safari, Opera */
page-break-inside: avoid;
/* Firefox */
break-inside: avoid;
/* IE 10+ */
}
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
<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>

小开

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

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

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

我用

 display: inline-flex ;
column-break-inside: avoid;
width:100%;
小开 
<style>
ul li{display: table;}
</style>

完美的作品

小开

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;
}
小开

试试这个:

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

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

小开

大部分的财产显示无效时，我要申请，如

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

当我检查响应时，它对我来说不是很好…

任何人都可以为我提供相同的解决方案…


提交答案