The break-inside property in CSS is used to specify how page breaks should be handled inside an element. This property is particularly useful when dealing with multi-column layouts or when printing documents.
When an element is split across multiple pages or columns, the break-inside property determines whether the element should be split or kept together. This property can be applied to block-level elements such as <div>, <p>, and <section>.
The break-inside property accepts the following values:
auto: The default value. The element can be split across multiple pages or columns.avoid: The element should not be split across multiple pages or columns. If necessary, the element will be moved to the next page or column.avoid-page: The element should not be split across multiple pages. If necessary, the element will be moved to the next page.avoid-column: The element should not be split across multiple columns. If necessary, the element will be moved to the next column.page: The element should always start on a new page.column: The element should always start on a new column.Let's take a look at some code examples to better understand how the break-inside property works:
In this example, we have a <div> element with some text inside. The break-inside property is set to auto, which means that the element can be split across multiple pages or columns if necessary.
<div style="break-inside: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
</div>
In this example, the <div> element can be split across multiple pages or columns if necessary. The text inside the element will flow as normal.
In this example, we have a <div> element with some text inside. The break-inside property is set to avoid, which means that the element should not be split across multiple pages or columns if possible.
<div style="break-inside: avoid;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
</div>
In this example, the <div> element should not be split across multiple pages or columns if possible. If necessary, the entire element will be moved to the next page or column. This can be useful for elements that contain important information that should not be split up.
In this example, we have a <div> element with some text inside. The break-inside property is set to page, which means that the element should always start on a new page.
<div style="break-inside: page;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
</div>
In this example, the <div> element should always start on a new page. This can be useful for elements that contain important information that should be separated from other content.
In this example, we have a <div> element with some text inside. The break-inside property is set to column, which means that the element should always start on a new column.
<div style="break-inside: column;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum velit, vel bibendum velit elit vel elit.</p>
</div>
In this example, the <div> element should always start on a new column. This can be useful for elements that contain important information that should be separated from other content.
Overall, the break-inside property in CSS is a powerful tool for controlling how page breaks are handled inside elements. By using this property, you can ensure that your content is displayed in a way that is both readable and visually appealing.