CSS Column Breaks

I’ve been working on a responsive project with lots of content that will need to be updated frequently. Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything extra efficient & scalable. The trouble is, sometimes content gets split across columns awkwardly. For example, In webkit browsers I noticed numbered list items were being split in half, which is less than desirable. Then, I found CSS column break properties. It saved the day:

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

The -o and -ms prefixes are wishful thinking, but I believe IE10 will offer support. Here’s a JSFiddle with a general idea of what I was getting at: http://jsfiddle.net/Cut3V/, and here’s an example without the column-break-inside code: http://jsfiddle.net/6vsgf/. Browsers still handle column-count in a variety of ways, so implement with the appropriate level of consideration.

23 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Adam

    Thanks Trent. I’ve also found that adding display: inline; to list items prevents them from being broken in half as well. What you have is more preferable, of course.

  • John

    I was just looking into these properties the other day myself. Are you positive that the -moz- prefix actually works? I don’t believe I ever got it working in Firefox, but you may have had better luck than me. A quick examination of Firefox’s CSS support chart doesn’t show any column-break-inside properties: https://developer.mozilla.org/en/Mozilla_CSS_support_chart

  • Trent

    @John:

    Are you positive that the -moz- prefix actually works?

    No sir, I think you’re right. Though my JSFiddle examples seem to both perform fairly well in Firefox, so hooray for that :)

  • Evan Mullins

    @Trent: of course, firefox may be reading the webkit prefix...

  • Christoph Zillgens

    Hi Trent,
    you gave that ol li some »float:left;«, that’s why it’s working in Firefox, I guess. A shame that it’s not working properly except in Webkit.

  • Sebastian

    Contrary, all the other prefixes are wishful thinking. CSS3 defines it this way: break-inside: avoid-column; and I think only Opera supports it correctly. Webkit should work (as you wrote -webkit-column-break-inside: avoid;), but unfortunately not for me.

  • Dave Joyce

    As a hack for Mozilla that I discovered on this thread (https://bugzilla.mozilla.org/show_bug.cgi?id=549114), Mozilla won’t split up a table across columns. So to hack it, instead of -moz-column-break-inside, put display: table.

    .column-fix {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
    display: table;
    }

    works like a charm for me.

  • Judson Collier

    Thanks for this post! Seriously saved me a lot of heartache on this issue for responsive columns.

  • Sam Beckham

    Massive help this post, thanks for sharing :). I’ve found that popping a ‘display: inline-block;’ on the element as well fixes some Firefox issues.

  • Andrew H.

    Lovely post, thanks. The W3C could have drafted the specification with clearer language...

  • Josh

    Very helpful, thank you!

  • Will

    IE 10 & the Windows 8 App platform support the W3C-defined ‘break-inside’ property, and doesn’t (as it turns out) support ‘-ms-column-break-inside’ or even ‘column-break-inside’.

    Go figure.

  • Caleb Mellas

    Trent thanks for the post about Column break properties. I was recently working on a 2-Column template layout, and I was really struggling with columns breaking awkwardly.

  • Wes Reimer

    For lists in Firefox, use float:left and clear:left, otherwise it can get messed up. The other solutions for Firefox (table/inline-block) cause the bullet to be hidden.

  • Scott Lawrence

    Hey Trent,

    Thanks for this! We’ve adopted a 2 column layout for text on one our new responsive sites and have used your code on the p tag to stop it splitting between paragraphs. It often left a couple of words “lost” in the 2nd column.

    This is great. Thanks!

    Scott

  • Teo Maragakis

    display: table; solved my Firefox issues, thanks!

  • Javier Fernandez

    Thank you!
    You’d solved my problem, again.

  • Kiraly Zoltan

    First of all thank you for this post, it was really helpful, for me it didn’t work correctly in IE, but I solved the issue by adding display:inline-table to my list elements.

  • David Ashkanasy

    Why have I only found this now?! Like all the others have said, this has solved a long-running very annoying issue for me. But to be honest, I’m surprised css3 column support has been so haphazard for so long. It’s not as if this has only recently been added to the standards.

  • Nicolas B.

    From my info gathered from the W3C, there is no “column-break-inside”. The property is “break-inside”.

    See http://www.w3.org/TR/css3-multicol/#break-inside

  • Nicolas B.

    Your blog breaks my text.

    The cesura here is *a bad idea* :

    “column-break-in-side”

  • Patrick

    @Sam Beckham: This seems to work for me as well. Thanks for the tip.

  • Aaron

    Just working through this issue. For Firefox (30/OSX) overflow: hidden on the <li> worked for me.

Leave a Reply