"break-inside: avoid-column" doesn't work in Firefox

Question

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:

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:

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>

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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>

Answer 6

In addition to break-inside: avoid-column being supported by Firefox now, the children apparently need to be inline items. So if you have block elements as children, you need to use their inline versions (eg inline-block, inline-flex, inline-grid) to make this work.

It makes sense, if you expect the break related properties to only target text or inline content.

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