📪Break

Break After Classes

.break-after-auto

Sets the break behavior after an element to auto, allowing the browser to determine the break behavior.

CSS equivalent: break-after: auto;

Example usage:

<div class="break-after-auto">This element has automatic break behavior after it.</div>

.break-after-avoid

Sets the break behavior after an element to avoid, indicating that the element should not be the start of a break.

CSS equivalent: break-after: avoid;

Example usage:

<div class="break-after-avoid">This element should avoid being the start of a break.</div>

.break-after-always

Sets the break behavior after an element to always, forcing a break after the element.

CSS equivalent: break-after: always;

Example usage:

<div class="break-after-always">This element always starts a new break.</div>

.break-after-all

Sets the break behavior after an element to all, indicating that all content should be forced to break after the element.

CSS equivalent: break-after: all;

Example usage:

<div class="break-after-all">All content should break after this element.</div>

.break-after-page

Sets the break behavior after an element to avoid-page, indicating that the element should avoid breaking on a page boundary.

CSS equivalent: break-after: avoid-page;

Example usage:

<div class="break-after-page">This element should avoid breaking at a page boundary.</div>

.break-after-column

Sets the break behavior after an element to avoid-column, indicating that the element should avoid breaking at a column boundary.

CSS equivalent: break-after: avoid-column;

Example usage:

<div class="break-after-column">This element should avoid breaking at a column boundary.</div>

These classes allow you to control the break behavior after an element, specifying whether it should break, avoid breaking, or force a break. Use them to create layouts that control the flow of content and avoid undesired breaks.

Break Before Classes

.break-before-auto

Sets the break behavior before an element to auto, allowing the browser to determine the break behavior.

CSS equivalent: break-before: auto;

Example usage:

<div class="break-before-auto">This element has automatic break behavior before it.</div>

.break-before-avoid

Sets the break behavior before an element to avoid, indicating that the element should not be the end of a break.

CSS equivalent: break-before: avoid;

Example usage:

<div class="break-before-avoid">This element should avoid being the end of a break.</div>

.break-before-always

Sets the break behavior before an element to always, forcing a break before the element.

CSS equivalent: break-before: always;

Example usage:

<div class="break-before-always">This element always ends a break.</div>

.break-before-all

Sets the break behavior before an element to all, indicating that all content should be forced to break before the element.

CSS equivalent: break-before: all;

Example usage:

<div class="break-before-all">All content should break before this element.</div>

.break-before-page

Sets the break behavior before an element to avoid-page, indicating that the element should avoid breaking on a page boundary.

CSS equivalent: break-before: avoid-page;

Example usage:

<div class="break-before-page">This element should avoid breaking at a page boundary.</div>

.break-before-column

Sets the break behavior before an element to avoid-column, indicating that the element should avoid breaking at a column boundary.

CSS equivalent: break-before: avoid-column;

Example usage:

<div class="break-before-column">This element should avoid breaking at a column boundary.</div>

These classes allow you to control the break behavior before an element, specifying whether it should break, avoid breaking, or force a break. Use them to create layouts that control the flow of content and avoid undesired breaks.

Break Inside Classes

.break-inside-auto

Sets the break behavior inside an element to auto, allowing the browser to determine the break behavior.

CSS equivalent: break-inside: auto;

Example usage:

<div class="break-inside-auto">This element has automatic break behavior inside it.</div>

.break-inside-avoid

Sets the break behavior inside an element to avoid, indicating that the element should not be broken inside.

CSS equivalent: break-inside: avoid;

Example usage:

<div class="break-inside-avoid">This element should avoid being broken inside.</div>

.break-inside-avoid-page

Sets the break behavior inside an element to avoid-page, indicating that the element should avoid being broken at a page boundary.

CSS equivalent: break-inside: avoid-page;

Example usage:

<div class="break-inside-avoid-page">This element should avoid being broken at a page boundary.</div>

.break-inside-avoid-column

Sets the break behavior inside an element to avoid-column, indicating that the element should avoid being broken at a column boundary.

CSS equivalent: break-inside: avoid-column;

Example usage:

<div class="break-inside-avoid-column">This element should avoid being broken at a column boundary.</div>

These classes allow you to control the break behavior inside an element, specifying whether it should be broken or avoided. Use them to create layouts that control the internal breaks within elements and ensure content integrity.

Page Break After Classes

.page-break-after-auto

Sets the page break behavior after an element to auto, allowing the browser to determine the page break behavior.

CSS equivalent: page-break-after: auto;

Example usage:

<div class="page-break-after-auto">This element has automatic page break behavior after it.</div>

.page-break-after-always

Sets the page break behavior after an element to always, indicating that a page break should always occur after the element.

CSS equivalent: page-break-after: always;

Example usage:

<div class="page-break-after-always">A page break should always occur after this element.</div>

.page-break-after-avoid

Sets the page break behavior after an element to avoid, indicating that a page break should be avoided after the element.

CSS equivalent: page-break-after: avoid;

Example usage:

<div class="page-break-after-avoid">A page break should be avoided after this element.</div>

.page-break-after-left

Sets the page break behavior after an element to left, indicating that a page break should occur after the element and that the next page should be a left-hand page.

CSS equivalent: page-break-after: left;

Example usage:

<div class="page-break-after-left">A page break should occur after this element, and the next page should be a left-hand page.</div>

.page-break-after-right

Sets the page break behavior after an element to right, indicating that a page break should occur after the element and that the next page should be a right-hand page.

CSS equivalent: page-break-after: right;

Example usage:

<div class="page-break-after-right">A page break should occur after this element, and the next page should be a right-hand page.</div>

Page Break Before Classes

.page-break-before-auto

Sets the page break behavior before an element to auto, allowing the browser to determine the page break behavior.

CSS equivalent: page-break-before: auto;

Example usage:

<div class="page-break-before-auto">This element has automatic page break behavior before it.</div>

.page-break-before-always

Sets the page break behavior before an element to always, indicating that a page break should always occur before the element.

CSS equivalent: page-break-before: always;

Example usage:

<div class="page-break-before-always">A page break should always occur before this element.</div>

.page-break-before-avoid

Sets the page break behavior before an element to avoid, indicating that a page break should be avoided before the element.

CSS equivalent: page-break-before: avoid;

Example usage:

<div class="page-break-before-avoid">A page break should be avoided before this element.</div>

.page-break-before-left

Sets the page break behavior before an element to left, indicating that a page break should occur before the element and that the previous page should be a left-hand page.

CSS equivalent: page-break-before: left;

Example usage:

<div class="page-break-before-left">A page break should occur before this element, and the previous page should be a left-hand page.</div>

.page-break-before-right

Sets the page break behavior before an element to right, indicating that a page break should occur before the element and that the previous page should be a right-hand page.

CSS equivalent: page-break-before: right;

Example usage:

<div class="page-break-before-right">A page break should occur before this element, and the previous page should be a right-hand page.</div>

These classes allow you to control the page break behavior before or after an element, specifying when and how page breaks should occur in print or multi-page contexts. Use them to control the layout and pagination of content.