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.