diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 55cc810d8a..3937da3a1e 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/npm/ng-packs/packages/core/src/lib/core.module.ts
@@ -18,6 +18,7 @@ import { ConfigState } from './states/config.state';
 import { ProfileState } from './states/profile.state';
 import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
+import { EllipsisDirective } from './directives/ellipsis.directive';
 
 @NgModule({
   imports: [
@@ -36,6 +37,7 @@ import { getInitialData } from './utils/initial-utils';
     PermissionDirective,
     VisibilityDirective,
     LocalizationPipe,
+    EllipsisDirective,
   ],
   exports: [
     CommonModule,
@@ -47,6 +49,7 @@ import { getInitialData } from './utils/initial-utils';
     DynamicLayoutComponent,
     PermissionDirective,
     VisibilityDirective,
+    EllipsisDirective,
     LocalizationPipe,
   ],
   providers: [LocalizationPipe],
diff --git a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
new file mode 100644
index 0000000000..b78a97c81c
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
@@ -0,0 +1,34 @@
+import { AfterContentInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+
+@Directive({
+  selector: '[abpEllipsis]',
+})
+export class EllipsisDirective implements AfterContentInit {
+  @Input('abpEllipsis')
+  witdh: string;
+
+  @HostBinding('title')
+  @Input()
+  title: string;
+
+  @HostBinding('class.abp-ellipsis')
+  enabled = true;
+
+  @HostBinding('style.max-width')
+  get maxWidth() {
+    return this.witdh || '180px';
+  }
+
+  constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef) {}
+
+  ngAfterContentInit() {
+    setTimeout(() => {
+      const title = this.title;
+      this.title = title || (this.elRef.nativeElement as HTMLElement).innerText;
+
+      if (this.title !== title) {
+        this.cdRef.detectChanges();
+      }
+    }, 0);
+  }
+}
diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts
index e10d3d1cc4..a20dd40c55 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/index.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/index.ts
@@ -1,2 +1,3 @@
+export * from './ellipsis.directive';
 export * from './permission.directive';
 export * from './visibility.directive';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
index de983d5c8c..348e9ab2aa 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
@@ -28,6 +28,13 @@ export default `
  background-color: rgba(0, 0, 0, .6);
 }
 
+.abp-ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* <animations */
 
 .fade-in-top {