Truncate | tcpsystems/ui

Try it

3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90

Svelte

<Truncate value="3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90" maxLength={20} />

Examples

Basic

3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90

Basic.svelte

<script lang="ts">
	import Truncate from '@tcpsystems/ui/foundation/Truncate';
</script>

<Truncate value="3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90" maxLength={20} />

Short

Short values are left alone: proj_4821

Short.svelte

<script lang="ts">
	import Truncate from '@tcpsystems/ui/foundation/Truncate';
</script>

<p>Short values are left alone: <Truncate value="proj_4821" maxLength={20} /></p>

Hash

Commit 1e7a9423f0c5b8d6a2e41f7c9b03d58e6a1f2c47 deployed.

Hash.svelte

<script lang="ts">
	import Truncate from '@tcpsystems/ui/foundation/Truncate';
</script>

<p>Commit <Truncate value="1e7a9423f0c5b8d6a2e41f7c9b03d58e6a1f2c47" maxLength={12} /> deployed.</p>

Path

/var/lib/tcp/studio/artifacts/2026/11/06/build-output.tar.zst

Path.svelte

<script lang="ts">
	import Truncate from '@tcpsystems/ui/foundation/Truncate';
</script>

<Truncate value="/var/lib/tcp/studio/artifacts/2026/11/06/build-output.tar.zst" maxLength={28} />

API

Import

import Truncate from '@tcpsystems/ui/foundation/Truncate';

Prop	Type	Default
`value`	`string`	none
`maxLength?`	`number`	`32`

Hook	Kind
`.tcp-truncate`	Root class