<script>
  import { Truncate, truncate } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`Truncate` provides text truncation functionality for single-line content. It implements Carbon's text truncation CSS classes and can be used as either a component or an action.

## Default

Display truncated text using the default component. Text is wrapped in a paragraph element and truncated at the end of the line.

<Truncate>
  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</Truncate>

## Clamp front

Truncate text from the beginning by setting `clamp` to `"front"`.

<Truncate clamp="front">
  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</Truncate>

## use:truncate

Apply truncation to any HTML element using the `truncate` action.

<h4 use:truncate>
  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</h4>
<h4 use:truncate={{ clamp: "front" }}>
  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</h4>