CSS break-before Tutorial

CSS break-before

The CSS break-before property specifies whether a page break should occur before an element. It is used to control the pagination behavior when printing a document. This property can be applied to block-level elements such as <div>, <p>, <h1>, etc.

The following values can be used with the break-before property:

auto: Default value. Automatic page break before the element.
always: Always insert a page break before the element.
avoid: Avoid page break before the element.
left: Insert a page break before the element, starting on a left page.
right: Insert a page break before the element, starting on a right page.

Result:


    <div style="break-before: always;">
      This is a div with break-before set to always.
    </div>

This is a div with break-before set to always.

You can also apply the break-before property to other block-level elements to control page breaks when printing. Experiment with different values to see the effects on pagination.