From 065fbc8fd9f2e467f6e4269885ba0874a1d22b2d Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Sat, 24 Jul 2021 20:00:57 +0800
Subject: [PATCH] feat: ellipsis title

---
 src/ResizableHeader.tsx |  2 +-
 src/index.css           | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/ResizableHeader.tsx b/src/ResizableHeader.tsx
index 8a73933..319f496 100644
--- a/src/ResizableHeader.tsx
+++ b/src/ResizableHeader.tsx
@@ -95,7 +95,7 @@ const AntdResizableHeader: React.FC<ComponentProp> = (props) => {
       >
         <div style={{ width: resizeWidth, height: '100%' }}></div>
       </Resizable>
-      <div {...rest}></div>
+      <div {...rest} className="resizable-title"></div>
     </th>
   );
 };
diff --git a/src/index.css b/src/index.css
index 529f472..f8d0b8b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,4 @@
-@import "react-resizable/css/styles.css";
-
+@import 'react-resizable/css/styles.css';
 
 .resizable-container {
   position: relative;
@@ -28,7 +27,8 @@
         transition: background-color 0.2s;
       }
 
-      &:active, &:hover {
+      &:active,
+      &:hover {
         cursor: col-resize;
 
         & .resizable-line {
@@ -42,4 +42,10 @@
       height: 100%;
     }
   }
+
+  & .resizable-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 }