diff --git a/src/directives/ellipsis.ts b/src/directives/ellipsis.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2370f4ed6c2c2d9ce5853f987b22400b1cee0c5c
--- /dev/null
+++ b/src/directives/ellipsis.ts
@@ -0,0 +1,42 @@
+import type { CSSProperties, DirectiveBinding, ObjectDirective, App } from 'vue';
+
+interface IValue {
+  width?: number;
+  line?: number;
+}
+
+interface IOptions {
+  [key: string]: CSSProperties;
+}
+
+const cssProperties: IOptions = {
+  single: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  multiple: {
+    display: '-webkit-box',
+    overflow: 'hidden',
+    wordBreak: 'break-all',
+  },
+};
+
+const Ellipsis: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<Array<IValue>>) {
+    const { value = [100, 1], arg = 'single' } = binding;
+    const [width, line] = value;
+    Object.entries(cssProperties[arg]).forEach(([key, value]) => {
+      el.style[key] = value;
+    });
+    el.style.width = `${width}px`;
+    if (arg === 'multiple') {
+      el.style.webkitLineClamp = `${line}`;
+      el.style.webkitBoxOrient = 'vertical';
+    }
+  },
+};
+export function setupEllipsisDirective(app: App) {
+  app.directive('ellipsis', Ellipsis);
+}
+export default Ellipsis;
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 0329eb651b90831dcc6bdef85db58250323ae515..ad58631cd8ee53c309c1dbd11869a278c3835767 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -4,8 +4,10 @@
 import type { App } from 'vue';
 import { setupPermissionDirective } from './permission';
 import { setupLoadingDirective } from './loading';
+import { setupEllipsisDirective } from './ellipsis';
 
 export function setupGlobDirectives(app: App) {
   setupPermissionDirective(app);
   setupLoadingDirective(app);
+  setupEllipsisDirective(app);
 }