CSS break-inside Property

CSS break-inside Property

This property specifies the occurrence of page break or column break or region break inside 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 inside the specified element, and this is the default value.
all	Always insert a page-break right inside the principal box
always	Always insert a page-break inside the element
avoid	Avoid a page/column/region break inside the element
avoid-column	Avoid a column-break inside the element
avoid-page	Avoid a page-break inside the element
avoid-region	Avoid a region-break inside the element

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-inside: 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 -