diff --git a/libs/angular/src/platform/pipes/ellipsis.pipe.ts b/libs/angular/src/platform/pipes/ellipsis.pipe.ts
index 081dba11ab..dd271f9462 100644
--- a/libs/angular/src/platform/pipes/ellipsis.pipe.ts
+++ b/libs/angular/src/platform/pipes/ellipsis.pipe.ts
@@ -3,6 +3,9 @@ import { Pipe, PipeTransform } from "@angular/core";
 @Pipe({
   name: "ellipsis",
 })
+/**
+ * @deprecated Use the tailwind class 'tw-truncate' instead
+ */
 export class EllipsisPipe implements PipeTransform {
   transform(value: string, limit = 25, completeWords = false, ellipsis = "...") {
     if (value.length <= limit) {
diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html
index cd0310d889..3e429b9430 100644
--- a/libs/components/src/badge-list/badge-list.component.html
+++ b/libs/components/src/badge-list/badge-list.component.html
@@ -1,8 +1,10 @@
 <div class="tw-inline-flex tw-gap-2">
-  <span *ngFor="let item of filteredItems; let last = last" bitBadge [badgeType]="badgeType">
-    {{ item }}
+  <ng-container *ngFor="let item of filteredItems; let last = last">
+    <span bitBadge [badgeType]="badgeType" [truncate]="truncate">
+      {{ item }}
+    </span>
     <span class="tw-sr-only" *ngIf="!last || isFiltered">, </span>
-  </span>
+  </ng-container>
   <span *ngIf="isFiltered" bitBadge [badgeType]="badgeType">
     {{ "plusNMore" | i18n : (items.length - filteredItems.length).toString() }}
   </span>
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts
index 09cbfb9d97..64deae21b9 100644
--- a/libs/components/src/badge-list/badge-list.component.ts
+++ b/libs/components/src/badge-list/badge-list.component.ts
@@ -14,6 +14,7 @@ export class BadgeListComponent implements OnChanges {
 
   @Input() badgeType: BadgeTypes = "primary";
   @Input() items: string[] = [];
+  @Input() truncate = true;
 
   @Input()
   get maxItems(): number | undefined {
diff --git a/libs/components/src/badge-list/badge-list.stories.ts b/libs/components/src/badge-list/badge-list.stories.ts
index 1c4536c1f9..92e9e14875 100644
--- a/libs/components/src/badge-list/badge-list.stories.ts
+++ b/libs/components/src/badge-list/badge-list.stories.ts
@@ -29,6 +29,7 @@ export default {
   ],
   args: {
     badgeType: "primary",
+    truncate: false,
   },
   parameters: {
     design: {
@@ -44,7 +45,7 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items"></bit-badge-list>
+      <bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
     `,
   }),
 
@@ -52,5 +53,16 @@ export const Default: Story = {
     badgeType: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"],
+    truncate: false,
+  },
+};
+
+export const Truncated: Story = {
+  ...Default,
+  args: {
+    badgeType: "info",
+    maxItems: 3,
+    items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"],
+    truncate: true,
   },
 };
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index e8c771c48c..14dc96edd5 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -26,11 +26,12 @@ const hoverStyles: Record<BadgeTypes, string[]> = {
 export class BadgeDirective {
   @HostBinding("class") get classList() {
     return [
-      "tw-inline",
+      "tw-inline-block",
       "tw-py-0.5",
       "tw-px-1.5",
       "tw-font-bold",
       "tw-text-center",
+      "tw-align-text-top",
       "!tw-text-contrast",
       "tw-rounded",
       "tw-border-none",
@@ -44,14 +45,19 @@ export class BadgeDirective {
       "focus:tw-ring-primary-700",
     ]
       .concat(styles[this.badgeType])
-      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []);
+      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
+      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
+  }
+  @HostBinding("attr.title") get title() {
+    return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
   @Input() badgeType: BadgeTypes = "primary";
+  @Input() truncate = true;
 
   private hasHoverEffects = false;
 
-  constructor(el: ElementRef<Element>) {
+  constructor(private el: ElementRef<HTMLElement>) {
     this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN";
   }
 }
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index 2efe5450d0..5912250e0e 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -14,6 +14,7 @@ export default {
   ],
   args: {
     badgeType: "primary",
+    truncate: false,
   },
   parameters: {
     design: {
@@ -29,11 +30,11 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType">Badge</span>
+      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge containing lengthy text</span>
       <br><br>
-      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType">Badge</a>
+      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</a>
       <br><br>
-      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType">Badge</button>
+      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</button>
     `,
   }),
 };
@@ -72,3 +73,10 @@ export const Info: Story = {
     badgeType: "info",
   },
 };
+
+export const Truncated: Story = {
+  ...Primary,
+  args: {
+    truncate: true,
+  },
+};