[Bugfix]zookeeper页面leader节点显示异常(#873)

km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import CardBar, { healthDataProps } from './index';
-import { Utils } from 'knowdesign';
+import { Tooltip, Utils } from 'knowdesign';
 import api from '@src/api';
 import { HealthStateEnum } from '../HealthState';
 
@@ -81,7 +81,22 @@ const ZookeeperCard = () => {
         {
           title: 'Leader',
           value() {
-            return <span style={{ fontSize: 24 }}>{leaderNode || '-'}</span>;
+            return (
+              <Tooltip title={leaderNode}>
+                <span
+                  style={{
+                    fontSize: 24,
+                    overflow: 'hidden',
+                    display: 'block',
+                    width: '100%',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {leaderNode || '-'}
+                </span>
+              </Tooltip>
+            );
           },
         },
         {

km-console/packages/layout-clusters-fe/src/components/CardBar/index.less

@@ -89,6 +89,7 @@
         margin-top: 5px;
         .num {
           font-family: DIDIFD-Medium;
+          overflow: hidden;
         }
         .sub-title {
           font-family: @font-family;