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