“break-inside: avoid-column” doesn’t work in Firefox

by

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

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. How to prevent column break within an element?
  4. How to remove the arrow from a select element in Firefox
  5. How to display an unordered list in two columns?
  6. Setting transform-origin on SVG group not working in Firefox
  7. Remove outline from select box in FF
  8. Div 100% height works on Firefox but not in IE
  9. Flexbox column-reverse in Firefox, Edge and IE
  10. How do I make Firefox auto-refresh on file change?
  11. transition for background-image in firefox?
  12. Different implementation of Flexbox in Firefox and Chrome
  13. How to create a multi-column list?
  14. Style a checkbox in firefox — remove check and border
  15. :before && :after pseudo elements not showing Firefox
  16. Firefox 30 is not hiding select box arrows anymore
  17. text-decoration not working for visited state link
  18. Is it possible to change the order of list items using CSS3?
  19. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  20. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  21. 2 colors in one placeholder of input field
  22. Flex elements ignore percent padding in Firefox
  23. Which way to implement this picture in HTML CSS code and bootstrap
  24. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  25. How to save CSS changes of Styles panel of Chrome Developer Tools?
  26. How to show multiline text in a table cell
  27. Line height issue with inline-block elements
  28. Avoiding repeated constants in CSS
  29. Aligning image to center inside a smaller div
  30. Why aren’t my bootstrap 4 columns the same height?

Leave a Comment