RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/break-before below:

break-before · WebPlatform Docs

break-before Summary

Control page/column/region breaks that fall above a block of content

Overview table

Initial value: auto
Applies to: block-level elements
Inherited: No
Media: visual
Computed value: specified value
Animatable: No
CSS Object Model Property: breakBefore
Percentages: n/a

Syntax

break-before: always
break-before: auto
break-before: avoid
break-before: avoid-column
break-before: avoid-page
break-before: avoid-region
break-before: column
break-before: left
break-before: page
break-before: region
break-before: right

Values

auto: Default. A page break or column break is determined by the flow of content.
always: A page break is inserted (forced) before the content block.
avoid: A page/column/region break is not allowed before the content block.
left: A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the “left” page that immediately follows the current page (according to the paging format of the document).
right: A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the “right” page that immediately follows the current page (according to the paging format of the document).
page: A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the page that immediately follows the current page (according to the paging format of the document).
column: A column break is inserted (forced) before the content block.
avoid-page: A page break is not allowed before the content block.
avoid-column: A column break is not allowed before the content block.
region: A region break is inserted (forced) before the content block.
avoid-region: A region break is not allowed before the content block.

Examples


h1 {
    break-before: always;
}


h2, h3 {
    break-after: avoid;
    break-inside: avoid;
}

Forces h3s onto a new column.

h3 {
    break-before: always;
}

View live example

Currently, must use WebKit Nightly or Chrome Canary with experimental features enabled.

Assuming the main content is at div class="main" and contains h3s, and 6 div class="region", the content will flow into these 6 regions.

.region {
    flow-from: main;
}

.main {
    flow-into: main;
}


h3 {
    break-before: always;
}

View live example

Usage

 This property replaces separate column-break-before, page-break-before, and region-break-before properties, which may still be present in some browser implementations.

Frequent use case is in a print stylesheet.

Related specifications

CSS Regions Module Level 1: W3C Working Draft
CSS Fragmentation Module Level 3: W3C Working Draft
CSS Multi-column Layout Module: W3C Candidate Recommendation