✂️ Truncation, Clamping & Aspect Ratios

Single and multi-line CSS text clamping, typographic headline balancing, and responsive media aspect ratios.

Live Preview: Clamping & Media Frame

Multi-line Text Clamping

TaxUI provides clean declarative attributes for multi-line clamping without requiring custom CSS classes or tricky line-height calculations. Any overflow text is gracefully truncated with an ellipsis.

clamp="2"

Single Line Truncate

This is a very long single-line text that automatically truncates when reaching container boundaries.

truncate

<!-- Single-line Truncate -->
<p truncate>Long line of text...</p>

<!-- Multi-line Clamp (2 to 6 lines) -->
<p clamp="2">Paragraph clamped at exactly 2 lines...</p>

<!-- Responsive Media Frame with Aspect Ratio -->
<div media-frame ratio="16:9">
  <img src="image.jpg" alt="Cover">
</div>