Related Articles

Related Articles

CSS break-inside property
  • Last Updated : 30 Sep, 2020

The break-inside property lets you to prevent an useless break within a multi-region contexts, 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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :