Skip to content
Related Articles

Related Articles

Improve Article

CSS break-inside property

  • Last Updated : 22 Aug, 2021

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 which 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



My Personal Notes arrow_drop_up
Recommended Articles
Page :