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

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

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

score 479 · Accepted Answer

正确的方法是使用break-insideCSS 属性：

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

不幸的是，截至 2021 年 10 月，Firefox 仍然不支持此功能，但其他所有主要浏览器都支持此功能。使用 Chrome，我可以使用上面的代码，但我无法为 Firefox 做任何事情（请参阅错误 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但这会删除原始问题中显示的项目符号。您的解决方案将根据您的目标而有所不同。

更新 2由于 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>

score 195 · Accepted Answer

195

添加;

display: inline-block;

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

于 2012-05-09T13:07:38.660 回答

score 52 · Accepted Answer

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

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

score 25 · Accepted Answer

截至 2014 年 10 月，在 Firefox 和 IE 10-11 中，break-inside 似乎仍然存在缺陷。但是，向元素添加溢出：隐藏，以及 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;

score 14 · Accepted Answer

Firefox 现在支持这个：

page-break-inside: avoid;

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

score 10 · Accepted Answer

接受的答案现在已经两年了，事情似乎已经改变了。

本文解释了该column-break-inside属性的使用。我不能说这与有何不同或为什么不同break-inside，因为只有后者似乎记录在 W3 规范中。但是，Chrome 和 Firefox 支持以下内容：

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

score 10 · Accepted Answer

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

score 6 · Accepted Answer

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

我用它修复了它

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

score 5 · Accepted Answer

Firefox 26 似乎需要

page-break-inside: avoid;

而 Chrome 32 需要

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

score 5 · Accepted Answer

以下代码用于防止元素内的分栏符：

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

overflow: auto

给孩子divs.

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

score 3 · Accepted Answer

我有同样的问题，我认为并找到了解决方案：

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

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

score 3 · Accepted Answer

3

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

完美运行

于 2018-09-05T13:05:28.237 回答

score 2 · Accepted Answer

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

score 2 · Accepted Answer

我更新了实际答案。

这似乎适用于 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属性似乎是产生块行为的属性。

score 2 · Accepted Answer

试试这个：

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

...为我工作，可能对你有用。

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

当我要申请时，大多数属性都显示无效，例如

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

当我检查响应能力时，它对我来说不能正常工作......

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

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

19 回答 19

Related

Reference