Text Truncation

Truncate long text with an ellipsis using .velin-truncate for single-line or .velin-line-clamp-{n} for multi-line truncation.

Single-line truncation

This is a very long text string that will be truncated with an ellipsis when it overflows the container element.

<p class="velin-truncate" style="max-width: 250px">
  This is a very long text string that will be truncated…
</p>

Multi-line clamp

Use .velin-line-clamp-2, .velin-line-clamp-3, etc. to limit visible lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="velin-line-clamp-2">Long text…</p>
<p class="velin-line-clamp-3">Even longer text…</p>