Clamp
The Clamp system provides a way to truncate text content with ellipsis after a specified number of lines.
Using classes from clamp--1 to
clamp--35,
you can precisely control how many lines of text to display before truncating.
Text Clamping Options
Text can be clamped to either a single line or multiple lines, depending on your layout needs. The clamp system uses CSS line-clamp properties to ensure consistent truncation across browsers.
Single Line Clamp
The clamp--1 class truncates text to a single line,
adding an ellipsis when content overflows.
Clamp 1
This text is clamped to a single line. Any overflow will be truncated with an ellipsis.
Clamp 1
This text is clamped to a single line. Any overflow will be truncated with an ellipsis.
Clamp 1
This text is clamped to a single line. Any overflow will be truncated with an ellipsis.
Single Line Clamp
Design System
<span class="description clamp--1">
This text is clamped to a single line. Any overflow will be truncated with an ellipsis.
</span>Multi-line Clamp
The clamp--{n} classes (where n is any number from 1 to 35)
allow you to control exactly how many lines of text to display before truncating with an ellipsis. This gives you precise control over text display
while maintaining layout consistency.
Clamp 3
This text is clamped to three lines. It will show up to three lines of text before truncating with an ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Clamp 3
This text is clamped to three lines. It will show up to three lines of text before truncating with an ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Clamp 3
This text is clamped to three lines. It will show up to three lines of text before truncating with an ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Multi-line Clamp
Design System
<span class="description clamp--3">
This text is clamped to three lines. It will show up to three lines of text before truncating with an ellipsis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>