CSS break-after Property

CSS break-after Property

This property specifies the occurrence of page break or column break or region break after 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 after the specified element, and this is the default value.
all	Always insert a page-break right after the principal box
always	Always insert a page-break after the element
avoid	Avoid a page/column/region break after the element
avoid-column	Avoid a column-break after the element
avoid-page	Avoid a page-break after the element
avoid-region	Avoid a region-break after the element
column	Always insert a column-break after the element
left	Insert one or two page breaks after the element.
page	Always insert a page break after the element
recto	Insert one or two page breaks after the principal box.
region	Always insert a region-break after the element
right	Insert one or two page-breaks after the element.
verso	Insert one or two page-breaks after 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-after: column;
}

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 -