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-region break-inside Browser Support
Widely available Since 2019 95% 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+