> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/layout/break.md).

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

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.