CSS break-inside Property

The break-inside CSS property defines how page, column, or region breaks should behave within the generated box. It is ignored when the generated box is not specified. Valid values include auto, avoid, avoid-page, avoid-column, and avoid-region.

Each element boundary is controlled by three properties:

Break-after, which applies to the preceding element.
Break-before, which applies to the following element.
Break-inside, which applies to the containing element.

The CSS fragmentation spec handles break behavior as follows:

Forced breaks (e.g., always, left, right) specified by break-before or break-after take precedence and will occur.
If no forced break is triggered, break-inside determines whether the browser attempts to avoid breaking inside the element. Setting it to avoid prevents page, column, or region breaks within the box.

Initial Value	auto
Applies to	block-level elements.
Inherited	No.
Animatable	Discrete.
Version	CSS3
DOM Syntax	object.style.breakInside = "avoid";

Syntax

Syntax of CSS break-inside Property

css

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;

Example of the break-inside property:

Example of CSS break-inside Property with avoid value

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Result

CSS break-inside Property

Values

Value	Description
auto	Default. Allows normal page, column, or region breaks inside the element.
avoid	Avoids any page, column, or region break inside the element.
avoid-page	Avoids a page break inside the element.
avoid-column	Avoids a column break inside the element.
avoid-region	Avoids a region break inside the element.
initial	Sets the property to its default value (`auto`).
inherit	Inherits the property from the parent element.

Practice

What does the CSS 'break-inside' property do?

It allows to control page/column/region breaks that fall within a boxIt controls the layout of a webpageIt allows to implement font stylesIt is used to avert a page/column/region break from occurring within an elementIt is used to specify the margins of an element

CSS break-inside Property ​

Syntax ​

Example of the break-inside property: ​

Result ​

Values ​

Practice ​

CSS break-inside Property

Syntax

Example of the break-inside property:

Result

Values

Practice