Text Truncation 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Ellipsize single-line overflow in dense tables or cards when the full string is available elsewhere (title/tooltip/sr text).

When not

Do not truncate essential instructions or error messages.
Ensure keyboard/AT users can still access the full text.

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>