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.
13 Responses
Leave a comment or contact me via Twitter @TrentWalton
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.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
@John:
No sir, I think you’re right. Though my JSFiddle examples seem to both perform fairly well in Firefox, so hooray for that :)
@Trent: of course, firefox may be reading the webkit prefix...
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.
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.
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.
Thanks for this post! Seriously saved me a lot of heartache on this issue for responsive columns.
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.
Lovely post, thanks. The W3C could have drafted the specification with clearer language...
Very helpful, thank you!
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.
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.