# Overflow

Source: https://iriscss.com/documentation/helpers/overflow/

Scroll, clip, truncate or clamp content that does not fit.

## Scroll and clip

| Class | Effect |
| --- | --- |
| `.overflow-auto` | Scrolls in both directions when needed |
| `.overflow-x-auto` | Scrolls sideways when needed |
| `.overflow-y-auto` | Scrolls up and down when needed |
| `.overflow-hidden` | Clips and blocks scrolling |
| `.overflow-clip` | Clips without creating a scroll container, so sticky children still stick to the page |

A box that scrolls must take focus for keyboard users to scroll it, so give it `tabindex="0"` and an `aria-label`.

```html
<div class="overflow-y-auto box" style="max-height: 6rem">
  <p>This box scrolls once its content is taller than 6rem.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
</div>
```

## Truncate

`.truncate` keeps the text on one line and cuts it with an ellipsis.

```html
<p class="truncate" style="max-width: 16rem">A long file name that does not fit, report-final-v2-reviewed.pdf</p>
```

## Line clamp

`.line-clamp` keeps the first 3 lines, with an ellipsis. Set `--i-line-clamp-lines` for another count.

```html
<p class="line-clamp" style="--i-line-clamp-lines: 2; max-width: 22rem">
  Iris CSS styles plain HTML with no classes. Every value is a custom
  property, every rule sits in a cascade layer and every color has a light
  and a dark side, so a page looks right from the first line of markup.
</p>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-line-clamp-lines` | `3` |