Truncate — ARC UI

Components

Truncate

typography

interactive

<arc-truncate>

Overview

Guidelines

When to use

Use for long descriptions, comments, or bio text that would dominate the layout
Set lines="2" or lines="3" for card descriptions and list item summaries
Use in combination with cards or list items to keep uniform heights
Test with varying content lengths to ensure the toggle appears correctly

When not to use

Use Truncate for single-line text — use CSS text-overflow: ellipsis instead
Set lines to 1 — the clamping behavior is designed for multi-line content
Truncate interactive content like forms or buttons — only use for text
Nest Truncate components — expanding one inside another creates confusing behavior

Features

CSS-native multi-line text clamping via -webkit-line-clamp
Automatic overflow detection — toggle only appears when text exceeds line limit
ResizeObserver for responsive re-measurement on container resize
Configurable line count via lines attribute
Reflected expanded attribute for CSS-based conditional styling
Show more / Show less toggle with accent-primary styling

Preview

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-truncate lines="3">
  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.
  Duis aute irure dolor in reprehenderit in voluptate velit esse.
</arc-truncate>

import { Truncate } from '@arclux/arc-ui-react';

<Truncate lines={3} onArcToggle={(e) => console.log(e.detail.expanded)}>
  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.
</Truncate>

<script setup>
import { Truncate } from '@arclux/arc-ui-vue';
</script>

<template>
  <Truncate :lines="3" @arc-toggle="(e) => console.log(e.detail.expanded)">
    Lorem ipsum dolor sit amet...
  </Truncate>
</template>

<script>
  import { Truncate } from '@arclux/arc-ui-svelte';
</script>

<Truncate lines={3} on:arc-toggle={(e) => console.log(e.detail.expanded)}>
  Lorem ipsum dolor sit amet...
</Truncate>

import { Component } from '@angular/core';
import { Truncate } from '@arclux/arc-ui-angular';

@Component({
  imports: [Truncate],
  template: `
    <Truncate [lines]="3" (arc-toggle)="onToggle($event)">
      Lorem ipsum dolor sit amet...
    </Truncate>
  `,
})
export class MyComponent {
  onToggle(e: CustomEvent) { console.log(e.detail.expanded); }
}

import { Truncate } from '@arclux/arc-ui-solid';

<Truncate lines={3}>
  Lorem ipsum dolor sit amet...
</Truncate>

import { Truncate } from '@arclux/arc-ui-preact';

<Truncate lines={3}>
  Lorem ipsum dolor sit amet...
</Truncate>

API

Prop	Type	Default	Description
`lines`	`number`	`3`	Maximum number of visible lines before clamping
`expanded`	`boolean`	`false`	Whether the text is fully expanded

Events

Event	Description
`arc-toggle`	Fired when expand/collapse toggle is clicked, with { expanded } detail