Truncate
Multi-line text clamping with expandable show-more toggle.
<arc-truncate>Overview
Truncate clamps long text to a specified number of lines and provides a "Show more" / "Show less" toggle to expand and collapse the content. It uses CSS -webkit-line-clamp for native multi-line truncation, which is widely supported across current browsers and clamps reliably without JavaScript text measurement.
A ResizeObserver monitors the content container and detects whether the text actually overflows the clamp limit. The toggle button only appears when overflow is detected, so short text that fits within the line limit shows no toggle. When expanded, the component temporarily re-applies the clamp to measure whether the toggle should remain visible.
The component fires an arc-toggle event with { expanded } detail when toggled, and the expanded attribute is reflected for CSS targeting. The toggle link is styled with var(--accent-primary) and uppercase lettering consistent with the design system's action links.
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
- Do not use Truncate for single-line text. Use CSS text-overflow: ellipsis instead
- Do not set lines to 1. The clamping behavior is designed for multi-line content
- Do not Truncate interactive content like forms or buttons. Use it for text only
- Do not 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
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';
export default function Example() {
return (
<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: `
<arc-truncate [lines]="3" (arc-toggle)="onToggle($event)">
Lorem ipsum dolor sit amet...
</arc-truncate>
`,
})
export class MyComponent {
onToggle(e: CustomEvent) { console.log(e.detail.expanded); }
}import { Truncate } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Truncate lines={3}>
Lorem ipsum dolor sit amet...
</Truncate>
);
}import { Truncate } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Truncate lines={3}>
Lorem ipsum dolor sit amet...
</Truncate>
);
}API
linesnumber3- Maximum number of visible lines before clamping
expandedbooleanfalse- Whether the text is fully expanded
Events
arc-toggledetail:{ expanded: boolean }- Fired when expand/collapse toggle is clicked, with { expanded } detail