The break-after property is a CSS property that allows you to specify how a page should break after an element. This property is used to control page breaks in printed documents, but it can also be used to control how content is displayed on screen.
The break-after property is part of the CSS3 specification and is supported by most modern browsers. It is used to control page breaks after block-level elements such as headings, paragraphs, and lists.
The syntax for the break-after property is as follows:
selector {
break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column;
}
The values for the break-after property are:
auto: The default value. The page breaks after the element are determined by the browser.always: The page always breaks after the element.avoid: The page does not break after the element.left: The page breaks after the element and starts a new page on the left side.right: The page breaks after the element and starts a new page on the right side.page: The page breaks after the element and starts a new page.column: The page breaks after the element and starts a new column.avoid-page: The page does not break after the element, and if necessary, the element is moved to the next page.avoid-column: The page does not break after the element, and if necessary, the element is moved to the next column.Here are some examples of how to use the break-after property:
<div style="break-after: always;"> <p>This content will always start on a new page.</p> </div>
In this example, the break-after property is set to always, which means that the content inside the <div> element will always start on a new page.
<div style="break-after: avoid;"> <p>This content will not start on a new page if possible.</p> </div>
In this example, the break-after property is set to avoid, which means that the content inside the <div> element will not start on a new page if possible.
<div style="break-after: left;"> <p>This content will start a new page on the left side.</p> </div>
In this example, the break-after property is set to left, which means that the content inside the <div> element will start a new page on the left side.
The break-after property is a useful CSS property that allows you to control how content is displayed on printed documents and on screen. By using this property, you can control page breaks after block-level elements and ensure that your content is displayed in the way that you want it to be.