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

Question

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

编辑:仅指定宽度以演示不需要的渲染.在实际情况中,当然没有固定的宽度.

Answer 1

执行此操作的正确方法是使用break-inside CSS属性:

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

不幸的是,目前没有浏览器支持此功 使用Chrome,我可以使用以下内容,但我无法为Firefox做任何工作(参见错误549114):

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

如果需要,您可以为Firefox执行的解决方法是将非破坏性内容包装在表中,但如果您可以避免它,这是一个非常非常糟糕的解决方案.

UPDATE

根据上面提到的错误报告,Firefox 20+支持page-break-inside: avoid作为避免元素内部列断裂的机制,但下面的代码片段表明它仍然无法使用列表:

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

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

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

正如其他人所说,你可以这样做overflow: hidden,display: inline-block但是这会删除原始问题中显示的子弹.您的解决方案将根据您的目标而有所不同.

更新2由于Firefox没有阻止打破display:table和display:inline-block一个可靠的,但非语义的解决办法是换每个项目在其自己的列表,并应用该样式规则有:

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

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

Answer 2

添加;

display: inline-block;

子元素将阻止它们在列之间分割.

Answer 3

设置跟随您不想破坏的元素的样式:

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

Answer 4

截至2014年10月,在Firefox和IE 10-11中,内容似乎仍然存在问题.但是,添加溢出:隐藏到元素,以及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;

Answer 5

Firefox现在支持这个:

page-break-inside: avoid;

这解决了元素跨列的问题.

Answer 6

接受的答案现在已经两年了,事情似乎发生了变化.

本文介绍了该column-break-inside属性的用法.我不能说这是怎么或为什么不同break-inside,因为只有后者似乎记录在W3规范中.但是,Chrome和Firefox支持以下内容:

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

Answer 7

这在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>

Answer 8

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

我用它修复了它

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

Answer 9

以下代码可防止元素内出现分栏：

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