mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
33 lines
No EOL
1.3 KiB
Text
33 lines
No EOL
1.3 KiB
Text
<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> |