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.
This box scrolls once its content is taller than 6rem.
Second paragraph.
Third paragraph.
Truncate
.truncate keeps the text on one line and cuts it with an ellipsis.
A long file name that does not fit, report-final-v2-reviewed.pdf
Line clamp
.line-clamp keeps the first 3 lines, with an ellipsis. Set
--i-line-clamp-lines for another count.
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.
Variables
| Variable | Default |
|---|---|
--i-line-clamp-lines | 3 |