“break-inside：避免列”在 Firefox 中不起作用

Question

我在页脚中创建列。 它适用于 Chrome 和 IE，使用：

column-count: 4;
break-inside: avoid-column;

我在使用 Firefox 时遇到问题，其中属性被划掉：

我能做些什么？

使用page-break-inside: avoid ，我得到这样的东西。 有些物品会在他的 position 上移动，例如“物品 9”。

它在 Chrome 中的外观：

例如：

 #columnasFooter{ column-count: 3; } #columnasFooter li{ break-inside: avoid-column; page-break-inside: avoid; }

 <ul id="columnasFooter"> <li>Title column 1 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> </li> <li>Title column 2 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </li> <li>Title column 3 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </li> </ul>

Answer 1

我尝试使用page-break-inside: avoid修复，但对我来说，仅在 Firefox 上使用此属性和值无法正常工作。

然后我使用了以下解决方案，就我而言，它适用于 Firefox、Chrome 和 Edge：

#columnasFooter {
  column-count: 3;
}

#columnasFooter li {
  /* for Chrome and Edge */
  break-inside: avoid-column;
  /* for Firefox */
  display: inline-grid;
  page-break-inside: avoid;
}

/* for Chrome and Edge */
@supports (break-inside: avoid-column) {
  #columnasFooter li  {
    display: block;
  }
}

如您所见，我使用@supports规则来修复错误。 也许，它可能对某人有用

Answer 2

火狐不支持break-inside见这里： https : //developer.mozilla.org/en-US/docs/Web/CSS/break-inside

所以
使用page-break-inside:对于 Firefox：

column-count: 4;
break-inside: avoid-column;
page-break-inside:avoid;

请参阅此处有关page-break-inside:avoid; ：
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

Answer 3

在 Firefox 中使用overflow: hidden正常工作，但这在 Chrome 中不起作用。 所以我们应该使用@support查询来控制溢出。 下面的代码在 Chrome 和 Firefox 中运行良好。

 #columnasFooter { column-count: 3; } #columnasFooter li { break-inside: avoid-column; page-break-inside: avoid; overflow: hidden; /* fix for firefox */ } @supports (break-inside: avoid-column) { #columnasFooter li { overflow: visible; /* for chrome */ } }

 <ul id="columnasFooter"> <li>Title column 1 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> </li> <li>Title column 2 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </li> <li>Title column 3 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </li> </ul>

Answer 4

只是应用overflow: hidden在 li 旁边的breakInside: "avoid" ，在 Firefox 上为我解决了这个问题，它继续在 Chrome 上工作

Answer 5

随着Firefox 92.0 版的发布， avoid-column值适用于break-inside （Firefox 也添加了对avoid-page支持）：

 #columnasFooter{ column-count: 3; } #columnasFooter li{ break-inside: avoid-column; }

 <ul id="columnasFooter"> <li>Title column 1 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> </li> <li>Title column 2 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </li> <li>Title column 3 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </li> </ul>

Answer 6

除了break-inside: avoid-column现在被 Firefox 支持外，孩子们显然需要成为内联项目。 因此，如果您将块元素作为子元素，则需要使用它们的内联版本（例如 inline-block、inline-flex、inline-grid）来完成这项工作。

如果您希望中断相关属性仅针对文本或内联内容，这是有道理的。

 #columnasFooter { column-count: 3; } #columnasFooter li { break-inside: avoid-column; }

 <ul id="columnasFooter"> <li>Title column 1 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> </li> <li>Title column 2 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </li> <li>Title column 3 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </li> </ul>

Answer 7

试试这个我认为它的工作

page-break-inside: avoid;