From e290874c516fd5c5d8229e3451a298c5626747c3 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 19 May 2021 13:17:58 +0800
Subject: [PATCH] fix: Typography ellipsis flush when contain suffix (#30582)

* fix: Typography ellipsis flush when contain suffix

* update snapshot

* fix Text default rows

* fix Text default rows
---
 components/typography/Base.tsx                         |  1 +
 .../__tests__/__snapshots__/demo.test.js.snap          | 10 +++++-----
 components/typography/style/index.less                 |  5 ++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index f04361f689..ed40c436b7 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -522,6 +522,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
                     [`${prefixCls}-${type}`]: type,
                     [`${prefixCls}-disabled`]: disabled,
                     [`${prefixCls}-ellipsis`]: rows,
+                    [`${prefixCls}-single-line`]: rows === 1,
                     [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
                     [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
                   },
diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap
index 5bf0a312d3..468e59be5e 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap
@@ -231,7 +231,7 @@ Array [
     />
   </button>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
@@ -241,7 +241,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     style="width:100px"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.
@@ -333,7 +333,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample 
     <span
@@ -352,7 +352,7 @@ Array [
   <p>
     2333
     <span
-      class="ant-typography ant-typography-ellipsis"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     >
       2333
     </span>
@@ -853,7 +853,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
   >
     To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index db1d4e4f6b..04f7566856 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -259,9 +259,12 @@
   }
 
   // ============ Ellipsis ============
+  &-single-line {
+    white-space: nowrap;
+  }
+
   &-ellipsis-single-line {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
 
     // https://blog.csdn.net/iefreer/article/details/50421025