From a9bc316b80d1977104fa6474cc7737d85de13756 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 28 Jan 2022 14:54:03 +0800
Subject: [PATCH] fix: ellipsis should display tooltip if rows larger than 1
 (#33875)

* fix: ellipsis should display tooltip if rows larger than 1

* test: add test case
---
 components/typography/Base/index.tsx          |  6 ++--
 .../typography/__tests__/ellipsis.test.js     | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index c3838330ba..c6eea42bf8 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -293,12 +293,14 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
     const textEle = typographyRef.current;
 
     if (enableEllipsis && cssEllipsis && textEle) {
-      const currentEllipsis = textEle.offsetWidth < textEle.scrollWidth;
+      const currentEllipsis = cssLineClamp
+        ? textEle.offsetHeight < textEle.scrollHeight
+        : textEle.offsetWidth < textEle.scrollWidth;
       if (isNativeEllipsis !== currentEllipsis) {
         setIsNativeEllipsis(currentEllipsis);
       }
     }
-  }, [enableEllipsis, cssEllipsis, children]);
+  }, [enableEllipsis, cssEllipsis, children, cssLineClamp]);
 
   // ========================== Tooltip ===========================
   const tooltipTitle = ellipsisConfig.tooltip === true ? children : ellipsisConfig.tooltip;
diff --git a/components/typography/__tests__/ellipsis.test.js b/components/typography/__tests__/ellipsis.test.js
index 372c206039..34173480db 100644
--- a/components/typography/__tests__/ellipsis.test.js
+++ b/components/typography/__tests__/ellipsis.test.js
@@ -277,4 +277,34 @@ describe('Typography.Ellipsis', () => {
     const tooltipWrapper = mount(<Base ellipsis={{ expandable: true, tooltip: 'little' }} />);
     expect(tooltipWrapper.find('.ant-typography').prop('aria-label')).toEqual('little');
   });
+
+  it('should display tooltip if line clamp', () => {
+    mockRectSpy = spyElementPrototypes(HTMLElement, {
+      scrollHeight: {
+        get() {
+          let html = this.innerHTML;
+          html = html.replace(/<[^>]*>/g, '');
+          const lines = Math.ceil(html.length / LINE_STR_COUNT);
+          return lines * 16;
+        },
+      },
+      offsetHeight: {
+        get: () => 32,
+      },
+      offsetWidth: {
+        get: () => 100,
+      },
+      scrollWidth: {
+        get: () => 100,
+      },
+    });
+
+    const wrapper = mount(
+      <Base ellipsis={{ tooltip: 'This is tooltip', rows: 2 }}>
+        Ant Design, a design language for background applications, is refined by Ant UED Team.
+      </Base>,
+    );
+    expect(wrapper.find('EllipsisTooltip').prop('isEllipsis')).toBeTruthy();
+    mockRectSpy.mockRestore();
+  });
 });