css - CSS3 Columns - Force non breaking/splitting element?

Question

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.

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

Any idea if this can be achieved?

Thanks!

Answer 1

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