CSS3 Columns - Force non breaking/splitting element?

Solution 1:

Add display:inline-block; to the item you want to prevent from splitting.

Solution 2:

In theory the property you are looking for is...

blockquote {
  column-break-inside : avoid;
}

However, last time I checked it wasn't properly implemented in Webkit, no idea about firefox. I've had more luck with:

blockquote {
  display: inline-block;
}

As the renderer treats it as an image and doesn't break it among columns.

Solution 3:

Just general FYI for others that bump into this forum and need a solution for Firefox.

At the moment writing this, Firefox 22.0 didn't support column-break-inside property even with -moz- prefix.

But the solution is quite simple: Just use display:table;. You can also do **display:inline-block; The problem with these solutions is that the list items will lose their list style item or bullet icon.

**Also, one problem I've experienced with display:inline-block; is that if the text in two consecutive list items is very short, the bottom item will wrap itself up and inline with the one above it.

display:table; is the least worst of both solutions.

More info here: http://trentwalton.com/2012/02/13/css-column-breaks/

Solution 4:

According to MDN, the correct solution is

blockquote {
  break-inside: avoid-column;
}

However this is not yet implemented in all browsers, so a practical solution is:

blockquote {
  display: inline-block;
}