CSS break-before Property

CSS break-before Property

This property specifies the occurrence of page break or column break or region break before the specified element, and whether it should occur or not.

Syntax -

Now we will see the values and their descriptions -

Value	Description
auto	It allows Automatic page/column/region break before the specified element, and this is default value.
all	Always insert a page-break right before the principal box
always	Always insert a page-break before the element
avoid	Avoid a page/column/region break before the element
avoid-column	Avoid a column-break before the element
avoid-page	Avoid a page-break before the element
avoid-region	Avoid a region-break before the element
column	Always insert a column-break before the element
left	Insert one or two page breaks before the element.
page	Always insert a page break before the element
recto	Insert one or two page breaks before the principal box.
region	Always insert a region-break before the element
right	Insert one or two page-breaks before the element.
verso	Insert one or two page-breaks before the principal box.

Now we will see the example -

Example -

<!DOCTYPE html>
<html>

<head>
<style>
html {
font-family: helvetica, arial, sans-serif;
}

h1 {
font-size: 3rem;
letter-spacing: 2px;
column-span: all;
}

h2 {
font-size: 1.2rem;
color: rgb(236, 81, 15);
letter-spacing: 1px;
}

p {
line-height: 1.5;
break-before: row;
}

article {
column-width: 200px;
gap: 20px;
}
</style>
</head>

<body>
<article>
<h1>Main heading</h1>

<h2>Something</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit adipisci maiores nulla eius, incidunt quia numquam dolorum dicta impedit repudiandae nisi deleniti illum ullam quas praesentium laudantium quaerat quam mollitia dolor nostrum. Placeat, optio omnis! hsldf lsndlffls </p>

<h2>something</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi inventore eveniet possimus voluptate necessitatibus unde, aliquam iusto autem cupiditate quia quam, harum odio earum! Explicabo amet rem, veniam iusto perspiciatis facilis repudiandae? Quidem iusto quae magni fuga provident ab fugiat, tempora quo omnis eveniet.</p>

<h2>something</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis quisquam animi nam deleniti iure veniam enim ipsum recusandae consequuntur ipsam exercitationem, earum culpa, aut quasi illum iste sint deserunt quas, ex facere expedita. Rem?

<h2>something</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi tempora quisquam itaque incidunt culpa, sed ratione quaerat fuga molestiae necessitatibus aliquid voluptas laudantium eius autem voluptatibus soluta. Esse fugiat adipisci officia excepturi nesciunt harum beatae saepe reiciendis praesentium incidunt ad, amet nobis quaerat dolorem?</p>
</article>

</body>

</html>

Output -