diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
index 9e99c416000eabe6b24364a194df149043a3a7ea..351b414374f1c274f3d071cc6a9968c13334dff9 100644
--- a/src/components/Ellipsis/index.js
+++ b/src/components/Ellipsis/index.js
@@ -25,7 +25,7 @@ const EllipsisText = ({ text, length, tooltip, ...other }) => {
 
   if (tooltip) {
     return (
-      <Tooltip title={text}>
+      <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={text}>
         <span>
           {displayText}
           {tail}
@@ -183,7 +183,13 @@ export default class Ellipsis extends Component {
       return (
         <div id={id} className={cls} {...restProps}>
           <style>{style}</style>
-          {tooltip ? <Tooltip title={children}>{children}</Tooltip> : children}
+          {tooltip ? (
+            <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={children}>
+              {children}
+            </Tooltip>
+          ) : (
+            children
+          )}
         </div>
       );
     }
@@ -198,7 +204,13 @@ export default class Ellipsis extends Component {
     return (
       <div {...restProps} ref={this.handleRoot} className={cls}>
         <div ref={this.handleContent}>
-          {tooltip ? <Tooltip title={text}>{childNode}</Tooltip> : childNode}
+          {tooltip ? (
+            <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={text}>
+              {childNode}
+            </Tooltip>
+          ) : (
+            childNode
+          )}
           <div className={styles.shadow} ref={this.handleShadowChildren}>
             {children}
           </div>