break-inside
Determines if an element should be allowed to split across pages or columns. Setting it to 'avoid' is the standard way to prevent images or cards from getting cut in half.
Quick example
.card {
display: inline-block;
width: 100%;
/* Prevents the card from breaking across multiple columns */
break-inside: avoid;
}Quick facts
Initial value
autoInherited
No
Applies to
block-level elements
Animation type
discrete
Values
autoavoidavoid-pageavoid-columnavoid-regionbreak-inside Browser Support
Widely availableSince 201995% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2019.
Safe to use without fallbacks.
50+
65+
10+
12+