CSS break-inside property
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;"> w3wiki </ 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
Contact Us