diff --git a/src/layouts/Base/Menu.jsx b/src/layouts/Base/Menu.jsx
index e41a231f..fce4cbf6 100644
--- a/src/layouts/Base/Menu.jsx
+++ b/src/layouts/Base/Menu.jsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import { Menu } from 'antd';
+import { Menu, Tooltip } from 'antd';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
@@ -110,7 +110,13 @@ export class LayoutMenu extends Component {
           {item.icon}
           <span>
             <Link key={item.key} to={item.path}>
-              {item.name}
+              {item.name.length > 15 ? (
+                <Tooltip title={item.name} placement="right">
+                  {item.name}
+                </Tooltip>
+              ) : (
+                item.name
+              )}
             </Link>
           </span>
         </Menu.Item>
@@ -119,7 +125,15 @@ export class LayoutMenu extends Component {
     const title = (
       <span>
         {item.icon}
-        <span>{item.name}</span>
+        <span>
+          {item.name.length > 15 ? (
+            <Tooltip title={item.name} placement="right">
+              {item.name}
+            </Tooltip>
+          ) : (
+            item.name
+          )}
+        </span>
       </span>
     );
     const subMenuItems = item.children.map((it) => this.renderMenuItem(it));
diff --git a/src/layouts/Base/index.less b/src/layouts/Base/index.less
index 97adcfe3..b50574cd 100644
--- a/src/layouts/Base/index.less
+++ b/src/layouts/Base/index.less
@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .nav {
   left: -(@nav-width + 10px);
@@ -16,7 +16,7 @@
   padding-left: 230px;
 }
 
-.header-collapsed{
+.header-collapsed {
   &:extend(.header);
   padding-left: 88px;
 }
@@ -115,6 +115,9 @@
     a {
       color: inherit;
     }
+    a::before {
+      width: 5px;
+    }
   }
 }
 
@@ -132,30 +135,33 @@
       padding-right: 5px;
     }
 
-    .ant-menu-item>span>a {
+    .ant-menu-item > span > a {
       padding-left: 13px;
       display: inline-block;
       width: 100%;
       color: transparent;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
-    .ant-menu-item>span>a::before {
+    .ant-menu-item > span > a::before {
       position: absolute;
       top: 18px;
       bottom: 0;
       left: 30px;
-      content: "";
+      content: '';
       width: 5px;
       height: 5px;
       background-color: rgba(255, 255, 255, 0.65);
       border-radius: 50%;
     }
 
-    .ant-menu-item-selected>span>a::before {
+    .ant-menu-item-selected > span > a::before {
       background-color: #fff !important;
     }
 
-    .ant-menu-item-active>span>a::before {
+    .ant-menu-item-active > span > a::before {
       background-color: @primary-color;
     }
 
@@ -164,7 +170,8 @@
     //     background-color: transparent !important;
     //   }
     // }
-    .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
+    .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
+      .ant-menu-item-selected {
       background-color: @primary-color;
       border-radius: @border-radius;
     }
@@ -227,7 +234,7 @@
 }
 
 .trigger::before {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   right: 0;
@@ -294,7 +301,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: #0068FF;
+  color: #0068ff;
   position: absolute;
   top: 48px;
   right: 0;
@@ -309,6 +316,8 @@
   word-wrap: break-word;
   background: #fff;
   border-radius: 4px;
-  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
-}
\ No newline at end of file
+  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}