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;
Default Value : Its default value is auto.
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
html
<!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 >
|
Output:
Supported Browsers:
- Chrome
- Safari (Partially Supported)
- Opera
- Firefox (Partially Supported)
- Internet Explorer