CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties that can be used to style and format the content of a web page. One such property is break-before.
The break-before property is used to specify whether a page break should occur before an element. This property is particularly useful when dealing with long documents that need to be split into multiple pages. By using the break-before property, you can control where the page breaks occur, ensuring that the content is displayed in a readable and organized manner.
The break-before property can be applied to any block-level element, such as headings, paragraphs, and lists. The property accepts several values, including auto, always, avoid, left, right, page, column, and region. Let's take a closer look at each of these values and how they can be used.
Auto: This is the default value for the break-before property. It allows the browser to determine where to insert a page break based on the available space.
<div style="break-before: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Always: This value forces a page break before the element, regardless of the available space.
<div style="break-before: always;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Avoid: This value prevents a page break before the element, if possible.
<div style="break-before: avoid;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Left: This value forces a page break before the element and places the element on the left-hand side of the page.
<div style="break-before: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Right: This value forces a page break before the element and places the element on the right-hand side of the page.
<div style="break-before: right;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Page: This value forces a page break before the element and places the element at the beginning of a new page.
<div style="break-before: page;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Column: This value forces a page break before the element and places the element at the beginning of a new column.
<div style="break-before: column;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
Region: This value forces a page break before the element and places the element at the beginning of a new region.
<div style="break-before: region;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit. Sed euismod, velit eget ultrices bibendum, velit elit malesuada velit, vel bibendum velit elit eget velit.</p>
</div>
The break-before property is a useful tool for controlling where page breaks occur in long documents. By using this property, you can ensure that your content is displayed in a readable and organized manner. Whether you need to force a page break, prevent a page break, or place an element at the beginning of a new page, column, or region, the break-before property has you covered.