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