Text wrapping & clamp
Utilities for controlling wrapping, breaking long strings, and line clamping.
Quick reference
Section titled “Quick reference”| Class | Styles |
|---|---|
af-text-nowrap | white-space: nowrap |
af-text-break | overflow-wrap: anywhere; word-break: break-word |
af-clamp / af-clamp-1 | 1-line clamp |
af-clamp-2 / af-clamp-3 / af-clamp-4 | multi-line clamp |
Available classes
Section titled “Available classes”af-text-nowrapaf-text-breakaf-clamp/af-clamp-1(equivalent - clamp to 1 line)af-clamp-2/af-clamp-3/af-clamp-4
Examples
Section titled “Examples”Clamp to 2 lines
A long paragraph that will be clamped to two lines. Add enough text and you’ll see it truncate after the second line.
<p class="af-clamp-2 af-p-sm" style="max-width: 20rem;">
A long paragraph that will be clamped to two lines. Add enough text and you'll see it truncate after the second line.
</p>Responsive variants
Section titled “Responsive variants”All wrapping utilities support responsive variants using the @{bp} suffix.
See Responsive Suffix for syntax and breakpoints.