CSS break-inside property

Last Updated : 30 Sep, 2024

The break-inside property in CSS is used to prevent unwanted breaks in multi-region contexts, such as multi-column layouts or paged media. It controls how region, column, or page breaks behave inside a box.

If no box is generated, the property is ignored. By using break-inside, you can avoid awkward content breaks and create a smoother layout.

Default Value: auto

Syntax

break-inside: Keywor_values;
/* Or */
break-inside: Global_values;

Property values

This property accepts the values mentioned above and described below:

Property Values	Description
Keyword Values	Refers to values like auto, avoid, avoid-page, avoid-column, and avoid-region, which control how breaks are handled in multi-region layouts.
Global Values	Refers to values such as initial, inherit, and unset, which apply global settings to the property.

Example of CSS break-inside property

Below is the example that illustrates the use of break-inside property

html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .Container {
            column-count: 3;
            column-rule: 2px dotted coral;
        }

        .Container ul {
            break-inside: avoid;
        }
    </style>
</head>

<body>

    <h1 style="text-align: center; 
               color: green;">
        GeeksforGeeks
    </h1>

    <div class="Container">
        <h3>Geek</h3>

        <p>
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
        </p>

        <ul>
            <li>Computer Science Portal !!</li>
            <li>Computer Science Portal !!</li>
            <li>Computer Science Portal !!</li>
            <li>Computer Science Portal !!</li>
            <li>Computer Science Portal !!</li>
            <li>Computer Science Portal !!</li>
        </ul>

        <p>
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
            Computer Science Portal !!
        </p>

    </div>
</body>
</html>

Output:

Supported Browsers

Chrome
Firefox (partially supported)
Opera
Safari (partially supported)
Edge
Internet Explorer (not supported)

Note: The break-inside property is supported in most modern browsers, though partial support in Firefox and Safari means it may not work fully as expected in some cases. It is not supported in Internet Explorer.

CSS page-break-inside Property

thacker_shahid

Improve

Article Tags :

CSS break-inside property

Syntax

Property values

Example of CSS break-inside property

Supported Browsers

Similar Reads

Thank You!

What kind of Experience do you want to share?