Clamp
The Clamp engine truncates text to a specified number of lines using word-based ellipsis. It preserves the original text, measures available width, and re-applies clamping whenever layouts change. Inside .columns
, clamping is handled automatically per column width by the Overflow engine; outside, use data-clamp
directly.
Standalone Clamp
Apply data-clamp
to any text element. The engine stores the original text in data-clamp-original
and clamps to the requested line count.
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Example Title</span>
<span class="description" data-clamp="2">Example description text that will be truncated to two lines…</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
<span class="label label--small label--underline">Confirmed</span>
</div>
</div>
</div>
Clamp Within Overflow Columns
When used inside .columns
, the Overflow engine re-clamps the same content for each column width. You can clamp titles, descriptions, or both.
<div class="columns" data-max-columns="2">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small" data-clamp="1">A fairly long title that will be clamped to a single line</span>
<span class="description">Supporting description text…</span>
<div class="flex gap--small">
<span class="label label--small label--underline">2:00 PM - 3:30 PM</span>
<span class="label label--small label--underline">Tentative</span>
</div>
</div>
</div>
</div>
</div>
<div class="columns" data-max-columns="3">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Item Title</span>
<span class="description" data-clamp="2">A longer description that will be clamped to two lines inside a column.</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:30 AM - 11:30 AM</span>
<span class="label label--small label--underline">Required</span>
</div>
</div>
</div>
</div>
</div>
<div class="columns" data-max-columns="2">
<div class="column">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small" data-clamp="1">Title text…</span>
<span class="description" data-clamp="3">Description text…</span>
<div class="flex gap--small">
<span class="label label--small label--underline">11:00 PM - 12:00 AM</span>
<span class="label label--small label--underline">Maintenance</span>
</div>
</div>
</div>
</div>
</div>
Notes
- Class-based
clamp--N
remains for backward compatibility; preferdata-clamp
. - Responsive variants (size/orientation) are supported via attributes, but inside
.columns
the engine determines the final clamp based on measured width.
Backward Compatibility
Legacy class tokens are supported and mapped to the Clamp engine automatically:
clamp--none
disables clamping, and
clamp--1
through
clamp--50
request N lines.
Responsive legacy class tokens (e.g., md:clamp--N
) are not supported. Use responsive data attributes instead if needed.
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Example Title</span>
<span class="description clamp--2">Example description with legacy class clamped to two lines of text.</span>
</div>
</div>