diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index ba9858a1..c87e7ef4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -167,6 +167,7 @@
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
- [`TreeView`](#treeview)
+- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)
---
@@ -4708,6 +4709,24 @@ export interface TreeNode {
| focus | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
| keydown | forwarded | -- |
+## `Truncate`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
+| clamp | No | let | No | "end" | "front" | "end" | -- |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
## `UnorderedList`
### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 1f404a95..4c83eb4e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -14646,6 +14646,28 @@
],
"rest_props": { "type": "Element", "name": "ul" }
},
+ {
+ "moduleName": "Truncate",
+ "filePath": "src/Truncate/Truncate.svelte",
+ "props": [
+ {
+ "name": "clamp",
+ "kind": "let",
+ "type": "\"end\" | \"front\"",
+ "value": "\"end\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "events": [],
+ "typedefs": [],
+ "rest_props": { "type": "Element", "name": "p" }
+ },
{
"moduleName": "UnorderedList",
"filePath": "src/UnorderedList/UnorderedList.svelte",
diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx
new file mode 100644
index 00000000..efa56aeb
--- /dev/null
+++ b/docs/src/pages/components/Truncate.svx
@@ -0,0 +1,34 @@
+
+
+
+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.
+
+
+ Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+
+
+## Clamp front
+
+Set `clamp` to `"front"` to clamp the text from the front.
+
+
+ Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+
+
+## use:truncate
+
+The `truncate` action can be used on plain HTML elements.
+
+
+ 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.
+
\ No newline at end of file
diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte
new file mode 100644
index 00000000..465d66d8
--- /dev/null
+++ b/src/Truncate/Truncate.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/src/Truncate/index.js b/src/Truncate/index.js
new file mode 100644
index 00000000..803c92f2
--- /dev/null
+++ b/src/Truncate/index.js
@@ -0,0 +1,2 @@
+export { default as Truncate } from "./Truncate.svelte";
+export { truncate } from "./truncate";
diff --git a/src/Truncate/truncate.d.ts b/src/Truncate/truncate.d.ts
new file mode 100644
index 00000000..35557fc0
--- /dev/null
+++ b/src/Truncate/truncate.d.ts
@@ -0,0 +1,12 @@
+interface TruncateOptions {
+ clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+ node: HTMLElement,
+ options?: TruncateOptions
+): {
+ update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;
diff --git a/src/Truncate/truncate.js b/src/Truncate/truncate.js
new file mode 100644
index 00000000..42723c09
--- /dev/null
+++ b/src/Truncate/truncate.js
@@ -0,0 +1,29 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @example
+ *
...
+ *
...
+ */
+export function truncate(node, options = {}) {
+ const prefix = "bx--text-truncate--";
+
+ function toggleClass(front = false) {
+ const classes = [...node.classList]
+ .filter((name) => !name.startsWith(prefix))
+ .join(" ");
+
+ node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
+ }
+
+ toggleClass(options.clamp === "front");
+
+ return {
+ update(options) {
+ toggleClass(options.clamp === "front");
+ },
+ };
+}
+
+export default truncate;
diff --git a/src/index.js b/src/index.js
index 16fba2b6..aa378cb1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -127,6 +127,8 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
export { TooltipDefinition } from "./TooltipDefinition";
export { TooltipIcon } from "./TooltipIcon";
export { TreeView } from "./TreeView";
+export { Truncate } from "./Truncate";
+export { default as truncate } from "./Truncate/truncate";
export {
Header,
HeaderAction,
diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte
new file mode 100644
index 00000000..4e8adc65
--- /dev/null
+++ b/tests/Truncate.test.svelte
@@ -0,0 +1,23 @@
+
+
+
+ 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.
+
+
+
+ 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.
+