Line Clamp

Line Clamp utilities limit how many lines of text are visible before the remaining content is clipped.

They are designed for real interface problems where content length is unpredictable, but layout consistency matters — blog cards, product cards, dashboards, search results, and any grid where one long title shouldn't break the rhythm of the row.

All line clamp utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

How it works

FrontAlign uses modern line-clamp CSS with WebKit compatibility, so the element keeps only the requested number of visible lines and hides the rest with overflow: hidden.

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Without it, one unusually long title makes a single card taller than the rest of the grid — Line Clamp keeps every card the same height regardless of content length.

Usage

Apply a clamp class directly to the text element you want to limit.

<h3 class="line-clamp-2">
  Build modern interfaces without framework chaos and unnecessary complexity
</h3>

Single-line clamp

Use line-clamp-1 for compact, single-row content like usernames, labels, and product names — anything that should never wrap.

<span class="line-clamp-1">
  Alexander Jonathan Richardson, Senior Frontend Architect
</span>

Two-line clamp

The default choice for card titles and headlines — gives a title room to wrap once without breaking grid alignment.

<h3 class="line-clamp-2">
  Designing scalable interface systems for modern frontend applications
</h3>

Three-line clamp

Use line-clamp-3 for descriptions, summaries, and excerpts — enough room for context without letting one entry dominate a list.

<p class="line-clamp-3">
  FrontAlign combines utility-first flexibility, production-ready components,
  runtime intelligence, and semantic design tokens into one lightweight UI engine.
</p>

The most common real-world pattern — pairing line-clamp-2 on a title with line-clamp-3 on its description inside a single card.

<article class="border rounded-4 shadow p-4">
  <h3 class="line-clamp-2 font-semibold">
    Why documentation quality defines developer experience
  </h3>
  <p class="line-clamp-3 text-slate-600">
    Great documentation helps users understand, trust, and adopt your framework
    faster, with fewer support questions and fewer mistakes along the way.
  </p>
</article>

This same title + description pattern covers blog cards, product cards, dashboard widgets, news feeds, team cards, search results, and documentation previews — only the surrounding markup changes.

Combining utilities

Line clamp composes cleanly with typography, hover states, and layout utilities:

<h2 class="font-bold line-clamp-2 transition-color hover:text-primary">
  Featured headline for a product launch announcement
</h2>

Accessibility notes

Line clamping visually hides part of the content. Avoid clamping text that's required for understanding, legal clarity, critical warnings, or important actions.

When clamping important text, pair it with a full detail page, tooltip, or expand control so nothing is permanently lost:

<h3 class="line-clamp-2">Long article title</h3>
<a href="/article">Read full article</a>

Best practices

• Use line-clamp-1 for compact labels, usernames, and single-line titles.
• Use line-clamp-2 for card titles and headlines.
• Use line-clamp-3 for descriptions, summaries, and excerpts.
• Combine with cards, grids, and aspect-ratio utilities to keep responsive grids visually even.
• Never clamp critical or legally required information — provide an expand path instead.