How to prevent column break within an element?

Question

Consider the following HTML:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

and the following CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

As it stands, Firefox currently renders this similarly to the following:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Notice that the fourth item was split between the second and third column. How do I prevent that?

The desired rendering might look something more like:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

or

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

Edit: The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.

score 532 · Accepted Answer · edited Oct 29 '21 at 06:07

532

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

As others mention, you can do overflow: hidden or display: inline-block but this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

UPDATE 2 Since Firefox does prevent breaking on display:table and display:inline-block a reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

edited Oct 29 '21 at 06:07

tagurit

494
5
13

answered Oct 16 '11 at 16:37

Brian Nickel

26,890
5
80
110

4

I believe Opera 11.5 supports `break-inside: avoid-column` – Alohci Oct 16 '11 at 21:26
2

Looking at [Comment 15](https://bugzilla.mozilla.org/show_bug.cgi?id=549114#c15) `page-break-inside:avoid` should work in FF 20. – Brian Nickel Jul 22 '13 at 15:55
1

Internet Explorer 10 supports `break-inside: avoid-column`. – rink.attendant.6 Aug 02 '13 at 21:22
25

At year 2014, the right syntax seems to be: ```-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; ``` – Carles Jove i Buxeda May 08 '14 at 04:35
3

@CarlesJoveBuxeda Not seeing any improvement in Firefox 31. Neither column-break-inside or page-break-inside (with or without prefix) are working. – Brian Nickel Aug 15 '14 at 16:26
Opera doesn't support -o-column-break-inside: avoid; But is does support; -webkit-column-break-inside: avoid; – PHPGuru Apr 11 '16 at 15:21
7

It's a little late, but as this is still an issue in 2018 this might be useful to others who end up here. If anyone is still having bugs between browsers with this, `overflow: hidden` is the better option. `display: inline-block;` causes new quirks with Chrome, unfortunately. – SilasOtoko Feb 06 '18 at 16:28
I cannot make it work in Chrome and that's exactly what's written on canIuse: `Partial support refers to not supporting the avoid-column, column, and avoid (in the column context) values for the properties break-before, break-after, and break-inside.` – Mikhail Romanov May 13 '19 at 09:42
update: it is broken when an inside container element has relatively big vertical margin. Replacing margin with empty `gutter` element fixed the issue – Mikhail Romanov May 13 '19 at 10:14
Use both avoid and avoid-column. Seems to work across all standard browsers – Delmontee Aug 12 '20 at 11:20
1

@BrianNickel May be time to update this as Firefox v82.0 (out this month) release notes say they added support for this property. – TylerH Sep 13 '21 at 14:12
2

Tested on **Firefox 97.0.1**, `break-inside: avoid-column;` works perfectly. – jona Feb 23 '22 at 19:34
@jona I still see the issue in 97.0.1. `
` still breaks.

Brian Nickel

Mar 01 '22 at 00:06

Wonderful, this solution resolved me column elements breaking and spreading out over the second column in Safair. Thank you. – Mattijs Jun 13 '23 at 13:02

score 208 · Answer 2 · answered May 09 '12 at 13:07

208

Adding;

display: inline-block;

to the child elements will prevent them being split between columns.

answered May 09 '12 at 13:07

Steve

2,089
1
12
2

4

This is good. A possible way to prevent the bad behavior of inline-block causing stuff to now get squished on one line (if they are too short) is to further wrap this with a `display:block` element. This will likely be a solid Firefox workaround for now. – Steven Lu May 05 '13 at 03:37
3

This solution removes the list item, so if you're using order lists for example this wouldn't be an alternative. – Ricardo Zea Jul 23 '13 at 17:19
1

Works perfectly for splitting up paragraphs into columns. – ChrisC Oct 21 '13 at 15:57
for list items, this can work if you embed the content of the list item (li) within a "span" element set with the "display:inline-block". The situation is much more complex if you want to control where to break pages or columns within tables : you would like to avoid breaks within table rows (tr). Really, multi-columns layouts are still difficult to setup, but we need it to allow sites to adapt to very narrow screens (such as smartphones) and to wide displays (where very narrow colulns are really unfair. – verdy_p Jan 08 '14 at 04:23
For now the only solution is to create separate pages for several pagewidths, using columns broken manually using tables (and hope that no accesibility option or zoom will change the font sizes! Developers of browser should really work seriously on multi-columns because smartphones are now spreading, but there are still lot of users wanting to use their wide screens or TV ! – verdy_p Jan 08 '14 at 04:24
12

Works for my `
` but I had to add `width:100%;` to prevent them from stacking horizontally.

Justin

Mar 27 '14 at 23:15

weird that display:block won't let firefox prevent splitting – Ben Nov 18 '14 at 18:00

@StevenLu - as at 2020, wrapping this in a `display:block` element now seems to stop this from working in FireFox – clayRay Feb 03 '20 at 02:50

I have two columns, and this (as opposed to `break-inside: avoid-column;`) allowed the child to remain in the first column rather than being moved to the second. – Chad Johnson Aug 05 '20 at 20:16

score 57 · Answer 3 · answered Jul 02 '13 at 00:13

57

set following to the style of the element that you don't want to break:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

answered Jul 02 '13 at 00:13

user2540794

571
4
2

nice. works for colum text paragraph as well. Added overflow: hidden to the
ind the
with the columns. Works for FF.
– dichterDichter Jul 01 '15 at 13:48
1

Actually, the `overflow:hidden` rule is not a fix for the other rules, it *is* what causes the nonbreaking layout… – Gras Double Feb 23 '17 at 13:05

score 26 · Answer 4 · edited Feb 23 '17 at 12:59

26

As of October 2014, break-inside still seems to be buggy in Firefox and IE 10-11. However, adding overflow: hidden to the element, along with the break-inside: avoid, seems to make it work in Firefox and IE 10-11. I am currently using:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

edited Feb 23 '17 at 12:59

Gras Double

15,901
8
56
54

answered Oct 29 '14 at 18:21

VerticalGrain

564
6
9

This seems to be the most exhaustive list – binaryfunt Sep 25 '15 at 16:02

score 16 · Answer 5 · answered Jun 29 '13 at 11:00

16

Firefox now supports this:

page-break-inside: avoid;

This solves the problem of elements breaking across columns.

answered Jun 29 '13 at 11:00

paul haine

169
1
2

Have you got this working? I am looking at this fiddle in FF 22 and it doesn't work: http://jsfiddle.net/bnickel/5qwMf/ – Brian Nickel Jul 22 '13 at 16:05
Same here, doesn't work in Firefox 22. Also, Firebug only displays `page-break-before:` or `page-break-after:` but not `page-break-inside:` – Ricardo Zea Jul 23 '13 at 17:21
Version 28 of Firefox. This is the only one that works for me yet, thanks! – Sander Verhagen Apr 11 '14 at 08:11

score 11 · Answer 6 · answered Dec 21 '15 at 11:12

11

This works for me in 2015 :

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

<div class='x'>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four is a bit longer</li>
    <li>Number five</li>
  </ul>
</div>

answered Dec 21 '15 at 11:12

Sébastien Gicquel

4,227
7
54
84

1

This is working for me on `ul` elements, is posted on CSS tricks: https://css-tricks.com/almanac/properties/b/break-inside/, and seems correct based on caniuse compatibility notes: "Partial support refers to not supporting the `break-before`, `break-after`, `break-inside` properties. WebKit- and Blink-based browsers do have equivalent support for the non-standard `-webkit-column-break-*` properties to accomplish the same result (but only the `auto` and `always` values). Firefox does not support `break-*` but does support the `page-break-*` properties to accomplish the same result." – nabrown Jan 16 '19 at 22:56

score 10 · Answer 7 · answered Nov 06 '13 at 21:53

10

The accepted answer is now two years old and things appear to have changed.

This article explains the use of the column-break-inside property. I can't say how or why this differs from break-inside, because only the latter appears to be documented in the W3 spec. However, the Chrome and Firefox support the following:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

answered Nov 06 '13 at 21:53

keithjgrant

12,421
6
54
88

This does not work for a general
where "a" replaces your "Li" above. The div still broke inside. FF 26
– Nasser Dec 29 '13 at 00:02
Not a bug. the code above is correct for the described function even if its selector is just for an li element. You could still use another CSS selector "div.a {...}" instead of "li{...}" in this sample. – verdy_p Jan 08 '14 at 04:06
However Chrome still does not support -webkit-column-break-inside:avoid; on a table row: this does not work and we still cannot avoid breaking tables in bad positions (notably if a tale cell does not just contain text but icons; but Chrome also appears to split at any vertical position in the middle of a text line, breaking the text with the upper part of text glyphs at bottom of the first column, and the lower part of text glyphs at top of the next column !!! The result is absolutely unreadable !!! – verdy_p Jan 08 '14 at 04:10
As of 2017, column-break-inside does not seem to be a valid css property. MDN only says "Edge also supports the non-standard -webkit-column-break-inside variant." – Jacob C. Oct 12 '17 at 20:52

score 7 · Answer 8 · answered Jun 07 '18 at 09:50

7

I faced same issue while using card-columns

i fixed it using

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

answered Jun 07 '18 at 09:50

Mysterious_Anny

79
1
4

1

Same here. With my `li {display: flex}` multiple elements on 2 columns breaking somewhere in the middle of `li` it helped to change to `li {display: inline-flex}`. – Valentine Shi Nov 08 '20 at 13:24

score 5 · Answer 9 · answered Jun 13 '17 at 16:12

The following code works to prevent column breaks inside elements:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

score 4 · Answer 10 · answered Jan 13 '14 at 15:14

4

Firefox 26 seems to require

page-break-inside: avoid;

And Chrome 32 needs

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

answered Jan 13 '14 at 15:14

MAP

59
1
7

score 4 · Answer 11 · answered Mar 12 '19 at 21:05

In 2019, having this works for me on Chrome, Firefox and Opera (after many other unsuccessful attempts):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

score 3 · Answer 12 · edited Jul 14 '17 at 14:52

3

I just fixed some divs that were splitting onto the next column by adding

overflow: auto

to the child divs.

*Realized it only fixes it in Firefox!

edited Jul 14 '17 at 14:52

dippas

58,591
15
114
126

answered Feb 01 '15 at 06:44

mateostabio

958
8
11

score 3 · Answer 13 · answered Jul 01 '15 at 14:14

3

I had the same problem i think and found a solution in this:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;

Working also in FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

answered Jul 01 '15 at 14:14

dichterDichter

315
7
16

score 3 · Answer 14 · answered Sep 05 '18 at 13:05

3

<style>
ul li{display: table;}  
</style>

works perfectly

answered Sep 05 '18 at 13:05

Tahir

302
3
14

This removes bullets in a list – Benjamin Intal Apr 08 '22 at 03:46

score 2 · Answer 15 · answered Mar 23 '14 at 12:26

I made an update of the actual answer.

This seems to be working on firefox and chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Note: The float property seems to be the one making the block behaviour.

score 2 · Answer 16 · answered Aug 12 '20 at 11:21

2

Try this:

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid-column;
page-break-inside: avoid-column;
break-inside: avoid-column;

...worked for me, might work for you.

answered Aug 12 '20 at 11:21

Delmontee

1,898
2
26
44

2

Seems each of the 3 unique properties are defined twice here. – Garrett Jan 06 '21 at 13:58

score 2 · Answer 17 · answered Mar 10 '12 at 18:05

2

A possible workaround for Firefox is to set the CSS property "display" of the element you don't want to have a break inside to "table". I don't know if it works for the LI tag (you'll probably lose the list -item-style), but it works for the P tag.

answered Mar 10 '12 at 18:05

Christopher

21
1

This solution removes the list item, so if you're using order lists for example this wouldn't be an alternative. – Ricardo Zea Jul 23 '13 at 17:19

score 1 · Answer 18 · answered Jun 23 '15 at 08:05

This answer might only apply to certain circumstances; If you set a height to your elements, this will be obeyed by the column styling. There-by keeping anything that is contained within that height to a row.

I had a list, like the op, but it contained two elements, items and buttons to act upon those items. I treated it like a table <ul> - table, <li> - table-row, <div> - table-cell put the UL in a 4 column layout. The columns were sometimes being split between the item and it's buttons. The trick I used was to give the Div elements a line height to cover the buttons.

score 1 · Answer 19 · answered Feb 15 '21 at 12:45

Most of the propertis is showing invalid when I am going to apply such as

  page-break-inside: avoid-column;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid-column;

and when I am checking is responsiveness it not working fine for me...

Anyone can provide me a solution for the same...

How to prevent column break within an element?

19 Answers19

Linked

Related