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.
It is documented as part of the CSS Fragmentation specification.
Syntax
/* Usage Example */
.card {
display: inline-block;
width: 100%;
/* Prevents the card from breaking across multiple columns */
break-inside: avoid;
}
/* Syntax */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
/* Global values */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;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.
50+
65+
10+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more