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

This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.

## Default

By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.

<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

Set `clamp` to `"front"` to clamp the text from the 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

The `truncate` action can be used on plain HTML elements.

<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>