Controlling CSS3 column-breaks
css, less, multiple-columns
Solution
As stated on caniuse.com:
Partial support refers to not supporting the break-before, break-after, break-inside properties. Webkit browsers do have equivalent support for the non-standard -webkit-column-break-* properties.
IE10 and Opera 12 (just hope they'll provide their code to WebKit when they'll switch to their new rendering engine...) may have better support (I didn't test it).
Financial Times Labs have released columnflow, a very advanced script (maybe too advanced for your use?):
- Configurable column widths, gutters and margins
- Fixed position elements
- Elements spanning columns
- Keep-with-next class to avoid headings at the bottom of a column
- No-wrap class to avoid breaking marked elements across columns
- Grouping of columns into pages
- Standardised line height to align text baseline to a grid
- Rapid reflow on font size change
Or maybe columnizer could help you
Problem
I am trying to control column breaks with CSS3 and having some issues with layout. I'm using less preprocessor to compile the CSS. My less code creates a class called "details" which is applied to a div. ``` .details { .column-count; .column-gap(50px); .column-rule(1px dotted @bodybackground); h3 { -webkit-column-span: all; -moz-column-span: all; column-span: all; padding-bottom: 25px; } h4 { &.breakbefore { -webkit-break-before: always; -moz-break-before: always; break-before: always; } &.breakafter { -webkit-break-after: always; -moz-break-after: always; break-after: always; } } ol li, ul li, table { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } } ``` However, the column breaks don't seem to work.