Skip to main content

break-inside

Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.

Fortunately, you can tell the browser to keep specific elements together with break-inside.

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

At the moment, the property universally accepts the values auto and avoid.

Use avoid on an element within a multi-column layout to keep the property from breaking apart.

Take one extra look at the syntax for this property as there’s some variation among the browsers.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

The property takes after the page break properties and shares the same values. For now, Firefox uses page-break-inside.

See the Pen column break-inside example [CSS-Tricks] by Katy DeCorah (@katydecorah) on CodePen.

Related Properties

Additional Resources

Browser Support

Page break properties:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
8110.0-10.1731176TP

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
13.310all767868

Multi-column layout support:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
8111.173101210

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.0-10.211.1all767868