Open In App

CSS break-before Property

Last Updated : 08 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The CSS break-before property is used to mention page break, region break, or column break should occur before the element or not. This property is ignored, if there is no generated box.

Syntax:

break-before: Generic break values;

Or

break-before: Page break values;

Or

break-before: Column break values;

Or

break-before: Region break values;

Or

break-before: Global values;

Default Value: 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 that illustrates the use of break-before property

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            color: #008000;
            text-align: center;
            font-size: 3rem;
            column-span: all;
        }
 
        h2 {
            color: green;
            break-before: column;
        }
 
        p {
            line-height: 1.5;
        }
 
        div {
            column-width: 250px;
            gap: 30px;
        }
    </style>
</head>
 
<body>
    <div>
        <h1>GeeksforGeeks</h1>
 
        <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>
 
        <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>
 
        <h2>geek 3</h2>
 
        <p>
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
            Computer Science portal 3
        </p>
    </div>
</body>
</html>


Output:

Supported Browsers:

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


Similar Reads

What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch
2 min read
CSS page-break-before Property
The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be
6 min read
How to insert line break before an element using CSS?
The white-space property is used to insert the line break before an element. This property controls the text wrapping and white-spacing. Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Example 1: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
2 min read
CSS box decoration break Property
The box-decoration-break property is used to control the box decoration after the fragmentation of the paragraph. It defines the background, padding, border, margin, and clip-path of an element that is applied when the box for the element is broken into separated parts. Default Value: slice Syntax: box-decoration-break: slice|clone|initial|inherit;
3 min read
CSS word-break Property
This word-break property is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen. Syntax: word-break: normal|break-all|keep-all|break-word|initial|inherit;Default Value: Normal Properties: There are word-break property which ar
2 min read
CSS page-break-after Property
The page-break-after property in CSS is used to add a page-break after the stated element. Similarly, page-break-before, page-break-after, and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed. Note: The page-break-after property cannot be used on absolutely po
9 min read
CSS page-break-inside Property
The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing. It inserts a page break or sometimes it is used to avoid a page break inside an element while printing. Syntax: page-break-inside: auto|avoid|initial|inherit Property Values: auto: It is the default value. This valu
2 min read
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-
2 min read
CSS break-after property
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
2 min read
How to define word-break property to allow words to be continued to the next line in CSS ?
In this article, we will see how to define a word-break property to allow words to be continued to the next line in CSS. You can use break-all and break-word property values to define the word-break property which is used to specify how to break the word when the word reached at end of the line. Syntax: word-break: break-all | break-word; Property
2 min read