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