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

Question

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

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

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

我能做什么？

使用page-break-inside: avoid，我得到类似this 的东西。 有些物品会移过他的位置，例如“第 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;

Answer 2

Fire fox 不支持 break-inside，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

SO
使用 page-break-inside: for 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

我尝试使用 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 4

overflow: hidden 在 Firefox 中正常工作，但在 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 5

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

Answer 6

随着Firefox version 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>