Geek Answers Handbook

CSS3 Column Break Management

I am trying to control column breaks using CSS3 and some layout issues.

I use less preprocessor to compile CSS.

My less code creates a class called "details" that applies to the 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, column breaks do not seem to work.

+4
source share
1 answer

As indicated on caniuse.com :

Partial support means not supporting break-before, break-after, break-inside properties. Webkit browsers have equivalent support for the non-standard properties -webkit-column-break- *.

IE10 and Opera 12 (I just hope they provide their WebKit code when they switch to the new rendering engine ...), it might be better to support (I have not tested it).

Financial Times Labs have released columnflow , a very advanced script (perhaps too advanced for your use):

  • Configurable column, gutter, and margin widths
  • Fixed Position Items
  • Column Spans
  • Save with the following class to avoid headings at the bottom of the column.
  • No-wrap class to exclude broken marked items in columns
  • Grouping columns into pages
  • Standardized row height to align the baseline to the grid.
  • Quick update when changing font size

Or maybe columnizer can help you

+3
source

More articles:


All Articles