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.

17 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.

Leave a Reply