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.
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.
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>Removing Text Clamping
The clamp--none class allows you to remove any clamping applied to an element,
restoring normal text flow and word wrapping behavior. This will reset text overflow handling, remove line clamping, and allow text to break naturally at word boundaries.
<span class="description clamp--none">
This text has all clamping removed. It will display naturally without any truncation or ellipsis, regardless of length.
</span>