diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index 6f900c5c6e1..4010970dc9e 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/libs/components/src/item/item-content.component.html
@@ -6,14 +6,26 @@
bitTypography="body2"
class="tw-text-main tw-truncate tw-inline-flex tw-items-center tw-gap-1.5 tw-w-full"
>
-
-
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
index f6cc3f133ad..fcd98bc55f6 100644
--- a/libs/components/src/item/item-content.component.ts
+++ b/libs/components/src/item/item-content.component.ts
@@ -6,6 +6,7 @@ import {
ChangeDetectionStrategy,
Component,
ElementRef,
+ Input,
signal,
ViewChild,
} from "@angular/core";
@@ -32,6 +33,13 @@ export class ItemContentComponent implements AfterContentChecked {
protected endSlotHasChildren = signal(false);
+ /**
+ * Determines whether text will truncate or wrap.
+ *
+ * Default behavior is truncation.
+ */
+ @Input() truncate = true;
+
ngAfterContentChecked(): void {
this.endSlotHasChildren.set(this.endSlot?.nativeElement.childElementCount > 0);
}
diff --git a/libs/components/src/item/item.mdx b/libs/components/src/item/item.mdx
index ca697ebb436..ab39e738b26 100644
--- a/libs/components/src/item/item.mdx
+++ b/libs/components/src/item/item.mdx
@@ -111,6 +111,30 @@ Actions are commonly icon buttons or badge buttons.
```
+## Text Overflow Behavior
+
+The default behavior for long text is to truncate it. However, you have the option of changing it to
+wrap instead if that is what the design calls for.
+
+This can be changed by passing `[truncate]="false"` to the `bit-item-content`.
+
+```html
+
+
+ Long text goes here!
+ This could also be very long text
+
+
+```
+
+### Truncation (Default)
+
+
+
+### Wrap
+
+
+
## Item Groups
Groups of items can be associated by wrapping them in the ``.
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 3a64a334d0a..fd2d59c7ac2 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -135,7 +135,7 @@ export const ContentTypes: Story = {
}),
};
-export const TextOverflow: Story = {
+export const TextOverflowTruncate: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
@@ -158,6 +158,29 @@ export const TextOverflow: Story = {
}),
};
+export const TextOverflowWrap: Story = {
+ render: (args) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+ Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
+ Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
const multipleActionListTemplate = /*html*/ `