如何防止元素内的列中断？

html CSS

小宇宙

2020-03-24

考虑以下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

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

第3318篇《如何防止元素内的列中断？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答
梅村村 2020.03.24

我更新了实际答案。

这似乎适用于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 */
}

注：该浮动属性似乎是一个作为块行为。

Tony凯 2020.03.24 
<style>
ul li{display: table;}  
</style>

完美运作

老丝 2020.03.24

这个答案可能仅适用于某些情况；如果为元素设置高度，则列样式将遵循此高度。从而将包含在该高度内的所有内容保持一行。

我有一个列表，例如op，但是它包含两个元素，项目和操作这些项目的按钮。我对待它像一个表<ul> - table，<li> - table-row，<div> - table-cell把UL在4列布局。列有时会在项目和按钮之间进行拆分。我使用的技巧是为Div元素赋予行高以覆盖按钮。

神乐西门 2020.03.24

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

我用修复 

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
樱小胖Mandy 2020.03.24

我遇到了同样的问题，并在此找到了解决方案：

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

在FF 38.0.5中也可以使用：http : //jsfiddle.net/rkzj8qnv/

斯丁宝儿 2020.03.24

Firefox 26似乎需要

page-break-inside: avoid;

和Chrome 32的需求 

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;
十三村村蛋蛋 2020.03.24

我只是div通过添加修复了一些拆分到下一列的

overflow: auto

给孩子div的。

*意识到它只能在Firefox中修复它！

Mandy村村 2020.03.24

Firefox可能的解决方法是将您不想在其中休息的元素的CSS属性“显示”设置为“表”。我不知道它是否适用于LI标签（您可能会丢失列表-item-style），但它适用于P标签。

斯丁 2020.03.24

在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;
}
斯丁前端 2020.03.24

以下代码可防止元素内部出现列中断：

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

现在公认的答案已经两年了，情况似乎已经改变。

本文介绍了该column-break-inside属性的用法。我不能说这与为何或为何不同break-inside，因为W3规范中似乎只记录了后者。但是，Chrome和Firefox支持以下功能：

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
猴子村村 2020.03.24

添加；

display: inline-block;

子元素将阻止它们在列之间拆分。

凯西里 2020.03.24

Firefox现在支持此功能：

page-break-inside: avoid;

这解决了元素跨列断裂的问题。

西里伽罗 2020.03.24

将以下设置为您不想破坏的元素的样式：

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

截至2014年10月，Firefox和IE 10-11的闯入似乎仍然存在漏洞。但是，在元素中添加了overflow：隐藏，以及break-inside：避免，似乎可以使其在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;

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android