fix(layout): Fix the issue of excessively long titles not being trunc…

…ated. close #7365
ant-design · Jul 13, 2023 · 0e67775 · 0e67775
1 parent 8cc6c9e
commit 0e67775
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8.6.1
+          version: 8.6.7
       - run: pnpm install
       - run: pnpm run build
         env:

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8.6.1
+          version: 8.6.7
 
       - run: pnpm install
         if: |

diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8.6.1
+          version: 8.6.7
       - name: build
         env:
           TEST_UI: 'preview'

diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 import type { ProTokenType } from '@ant-design/pro-provider';
 import { ProProvider } from '@ant-design/pro-provider';
 import { isImg, isUrl, useMountMergeState } from '@ant-design/pro-utils';
-import type { MenuProps} from 'antd';
+import type { MenuProps } from 'antd';
 import { Menu, Skeleton, Tooltip } from 'antd';
 import type { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';

diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -72,6 +72,13 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         flexDirection: 'row',
         alignItems: 'center',
         gap: token.marginXS,
+        [`${token.componentCls}-item-text`]: {
+          maxWidth: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          wordBreak: 'break-all',
+          whiteSpace: 'nowrap',
+        },
         '&-collapsed': {
           flexDirection: 'column',
           justifyContent: 'center',
@@ -86,9 +93,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
               height: '16px',
             },
           },
-          [`${token.componentCls}-item-text`]: {
-            maxWidth: '100%',
-          },
+
           [`${token.componentCls}-item-text-has-icon`]: {
             display: 'none !important',
           },