CSS Alternative to “page-break-inside: avoid”

In this article, we’ll explore CSS alternatives to “page-break-inside: avoid.” “page-break-inside: avoid” is a CSS property used to prevent elements within a page from breaking across pages and is commonly used in print styles. However, because it’s not supported in some browsers, we need to find an alternative solution.

Read more: CSS Tutorial

Using display: inline-block

A common alternative is to use the “display: inline-block” property instead of “page-break-inside: avoid.” This method ensures that inner elements do not break across the page, similar to “page-break-inside: avoid.” Here is an example:

.box {
display: inline-block; 
}

<div class="box">
<!-- Inner elements -->
</div>

Using flexbox layout

Another alternative is to use flexbox layout. Flexbox is a flexible layout model that allows you to flexibly control how elements are laid out within a container and can also be used to prevent elements from spreading across the page. Here’s an example:

.container {
display: flex;
flex-wrap: wrap;
} 

<div class="container"> 
<!-- Inner elements --> 
</div> 

Using break-inside: avoid-column

For multi-column layouts, we can use the “break-inside: avoid-column” property instead of “page-break-inside: avoid.” This property prevents inner elements from being split into different columns. Here’s an example:

.box {
break-inside: avoid-column;
}

<div class="box">
<!-- Inner elements -->
</div>

Browser-specific hacks

If we only need to target specific browsers, we can use browser-specific CSS prefixes to achieve this. Here are some hack examples for common browsers:

• Chrome:

@supports (-webkit-column-break: always) { 
.box { 
-webkit-column-break-inside: avoid; 
} 
} 

• Firefox:

@-moz-document url-prefix() { 
.box { 
page-break-inside: avoid; 
} 
} 

• IE:

@supports (-ms-ime-align: auto) {
.box {
-ms-page-break-inside: avoid;
}
}

By using these browser-specific hacks, we can achieve an effect similar to “page-break-inside: avoid” in different browsers.

Summary

In this article, we introduced several alternatives to the “page-break-inside: avoid” property. By using “display: inline-block,” flexbox layout, “break-inside: avoid-column,” and browser-specific hacks, we can prevent elements from breaking across printed pages. Depending on your needs, you can choose the appropriate method to achieve your desired print style.