CSS break-inside property

Last Updated : 08 Jun, 2023

The break-inside property lets you prevent a useless break within a multi-region context, multi-column layout, and in paged media. This property sets how region, column, or page breaks should behave inside a generated box. This property is ignored if there is no generated box.

Default Value: auto

Syntax:

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

Property values: This property accepts the properties values mentioned above and described below:

Keyword_values: This property refers to the values defined as auto, avoid, avoid-page, avoid-column, avoid-region, etc.
Global_values: This property refers to the values defined as initial, inherit, unset, etc.

Example: 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

Suggest improvement

CSS @page rule

Lodash _.sub() Method

Share your thoughts in the comments

CSS break-inside property

html

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?