Question

我是关于这一点的新手，我正在我的页脚中创建列。

我认为它适用于Chrome和IE使用：

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

我遇到了Firefox的问题，我得到的属性是crossed out

我该怎么办？你能帮忙吗？提前谢谢。

编辑：使用page-break-inside: avoid我得到类似this的内容。有些物品移动到他的位置，如“第9项”。

In Google Chorme

例如： HTML：

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

CSS：

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

Answer 1

火狐没有对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 2

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

尝试这个我认为它的工作

page-break-inside: avoid;

Answer 5

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

“break-inside：avoid-column”在Firefox中不起作用

5 个答案: