Menu
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!
747
We can prevent column break within an element by using a CSS break-inside Property. The break-inside property in CSS is used to specify how the column breaks inside the element. Sometimes content of an element is stuck between the column. To prevent column break we should use the break-inside Property set to avoid.
The break-inside property specifies whether or not a page break, column break, or region break should occur inside the specified element. The break-inside property extends then CSS2 page-break-inside property.
Add display:inline-block; to the item you want to prevent from splitting.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
