CODEWITHSUNDEEP
css
Probocop
Probocop

Reputation: 10552

CSS3 Columns - Force non breaking/splitting element?

I'm using some CSS3 columns (column-count: 2;column-gap: 20px;) to split some content into two columns. In my content I have a <p>, followed by a <blockquote>, followed by another <p>.

My question: Is there a way of preventing my <blockquote> (or any other specified element) from splitting into two columns?

For example, currently my <blockquote> is partially in column 1, and partially in column 2.

Blockquote split onto multiple columns

Ideally I'd like to make it so the <blockquote> stays together in either column 1 or 2.

Blockquote maintained in column

Any idea if this can be achieved?

Thanks!

Upvotes: 69

Views: 30454

Answers (4)

Tzach
Tzach

Reputation: 13376

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;
}

Upvotes: 12

Ricardo Zea
Ricardo Zea

Reputation: 10283

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/

Upvotes: 7

methodofaction
methodofaction

Reputation: 72395

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.

Upvotes: 51

bookcasey
bookcasey

Reputation: 40453

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

Upvotes: 122

Related Questions