Truncate
Multi-line text clamping with expandable show-more toggle.
<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
- 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 — only use for text
- 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