mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(truncate): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:09:45 -07:00
commit 5da50e047d
1 changed files with 4 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/src/pages/components/Truncate.svx
View file

@ -1,14 +1,13 @@
<script> <script>
import { Truncate, truncate } from "carbon-components-svelte"; import { Truncate, truncate } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </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. `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 ## 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. Display truncated text using the default component. Text is wrapped in a paragraph element and truncated at the end of the line.
<Truncate> <Truncate>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
@ -16,7 +15,7 @@ By default, text will be clamped at the end of the line. Text is wrapped with a
## Clamp front ## Clamp front
Set `clamp` to `"front"` to clamp the text from the front. Truncate text from the beginning by setting `clamp` to `"front"`.
<Truncate clamp="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. Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
@ -24,7 +23,7 @@ Set `clamp` to `"front"` to clamp the text from the front.
## use:truncate ## use:truncate
The `truncate` action can be used on plain HTML elements. Apply truncation to any HTML element using the `truncate` action.
<h4 use:truncate> <h4 use:truncate>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.