Text truncation

Atomic classes for managing an element’s text truncatation.

Classes

🔗

Class	Description
`.truncate`	Single-line truncation with ellipsis.
`.truncate2`	Clamp text to 2 line.
`.truncate3`	Clamp text to 3 line.
`.truncate4`	Clamp text to 4 line.
`.truncate5`	Clamp text to 5 line.
`.truncate-fade`	Fade-out effect at the bottom of the text block.

Examples

🔗

<p class="truncate">
  This sentence is too long to fit in one line and will be truncated with an ellipsis.
</p>

<p class="truncate3">
  This paragraph demonstrates a multiline truncation effect using the -webkit-line-clamp property.
  It limits the visible lines and hides the overflowed text.
</p>

<div class="truncate-fade hs1">
  <p>This block demonstrates the fade-out truncation effect applied at the bottom.<br />The text gradually fades to transparent.</p>
</div>

This sentence is too long to fit in one line and will be truncated with an ellipsis.

This paragraph demonstrates a multiline truncation effect using the -webkit-line-clamp property. It limits the visible lines and hides the overflowed text.

This block demonstrates the fade-out truncation effect applied at the bottom.
The text gradually fades to transparent.