feat: ellipsis title

hemengke1997 · Jul 24, 2021 · 065fbc8 · 065fbc8
1 parent f907ffb
commit 065fbc8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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;
+  }
 }