11

I'm creating columns in my footer. It works well for Chrome and IE using:

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

I'm getting troubles with Firefox, where the property is crossed out:

crossed out

What can I do?

Using page-break-inside: avoid, I get something like this. Some items move over his position, like "Item 9".

How it looks in Chrome:

Google Chrome

For example:

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

0

6 Answers 6

14

I tried bugfix with page-break-inside: avoid, but for me it didn't work fine with only this property and value on Firefox.

Then I used the following solution and, in my case, work well for Firefox, Chrome and 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;
  }
}

As you can see, I used @supports rule to bugfix. Maybe, it could be useful to someone

0
8

Works properly in Firefox with overflow: hidden but this doesn't work in Chrome. So we should use @support query to control overflowing. The below code works fine in Chrome and 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>

4

Fire fox does not have support to break-inside see here: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

SO
Use page-break-inside: for firefox:

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

See here about page-break-inside:avoid; :
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

2
  • 2
    Using page-break-inside, in Firefox, It shows me four columns, but some items that they are in 'li' item, are moved into another column. I attached a picture in the OP. Jun 4, 2018 at 12:10
  • attach image how it looks in chrome please Jun 4, 2018 at 12:12
2

Just applying overflow: hidden on the li alongside breakInside: "avoid", fixed the issue for me on Firefox and it continued to work on Chrome

1

With the release of Firefox version 92.0, the avoid-column value works for break-inside (Firefox added support for avoid-page as well):

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

2
  • There must have been a regression as Item 9 is appearing in the 3rd column for me as of Firefox 101.0.1
    – EoghanM
    Jun 14, 2022 at 9:35
  • @EoghanM Shows up in column 2 for me in Firefox 118; don't think I ever checked v101, so if it was a regression, it was fixed.
    – TylerH
    Oct 12 at 18:28
-1

try this i think its work

page-break-inside: avoid;
1
  • Doesn't work correctly. Now I get some items move over his position. Jun 4, 2018 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.