Related Articles

Related Articles

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

The break-after property allows you to place a break on multi-region contexts, paged media, and multi-column layouts. This property describes how the region, column, or page break behaves after the generated box. This property is ignored if there is no generated box at all.

Syntax:

break-after: Generic break values;
/* Or */
break-after: Page break values;
/* Or */
break-after: Column break values;
/* Or */
break-after: Region break values;
/* Or */
break-after: Global values;

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

  • Generic break values: This property refers to the values defined by auto, avoid, always, all, etc.
  • Page break values: This property refers to the values defined by page, avoid-page, left, right, recto, verso, etc.
  • Column break values: This property refers to the values defined by column, avoid-column, etc.
  • Region break values: This property refers to the values defined by region, avoid-region, etc.
  • Global values: This property refers to the values defined by inherit, initial, unset, etc.

Example: Below is the example which illustrates the use of break-after 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 olivedrab;
            }
  
            .Container hr {
                break-after: column;
            }
        </style>
    </head>
  
    <body>
        <h1 style="text-align: center; color: green;">
            GeeksforGeeks
        </h1>
  
        <div class="Container">
            <h2>geek 1</h2>
  
            <p>
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science portal 1 
              Computer Science
                portal 1
            </p>
  
            <hr />
  
            <h2>geek 2</h2>
  
            <p>
                Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science portal 2 
              Computer Science
                portal 2
            </p>
        </div>
    </body>
</html>

chevron_right


Output:

Supported Browsers:

  • Chrome
  • Safari (Partially Supported)
  • Opera
  • Firefox (Partially Supported)
  • Internet Explorer 



My Personal Notes arrow_drop_up
Recommended Articles
Page :