fix: [Typography] fix uncorrectly js truncation problem when width is…

… auto
DouyinFE · Nov 27, 2024 · 347887c · 347887c
1 parent 782c2fb
commit 347887c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/semi-ui/typography/_story/typography.stories.jsx b/packages/semi-ui/typography/_story/typography.stories.jsx
@@ -224,6 +224,20 @@ export const EllipsisSingle = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <div style={{ width: 300}} >
+      <Typography.Text
+        copyable={true}
+        link={{ href: '---' }}
+        ellipsis={{
+          showTooltip: {
+            opts: { content: '我是一个超长超长超长超长超长超长超长超长超长的链接' },
+          },
+        }}
+      >
+      我是一个超长超长超长超长超长超长超长超长超长的链接我是一个超长超长超长超长超长超长超长超长超长的链接
+      </Typography.Text>
+    </div>
   </div>
 );
 

diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx
@@ -64,6 +64,11 @@ const getRenderText = (
     ellipsisContainer.setAttribute('style', originCSS);
     ellipsisContainer.style.position = 'fixed';
     ellipsisContainer.style.left = '0';
+    // 当 window.getComputedStyle 得到的 width 值为 auto 时，通过 getBoundingClientRect 得到准确宽度
+    // When the width value obtained by window.getComputedStyle is auto, get the exact width through getBoundingClientRect
+    if (originStyle.getPropertyValue('width') === 'auto') {
+        ellipsisContainer.style.width = `${originEle.offsetWidth}px`;
+    } 
     ellipsisContainer.style.height = 'auto';
     ellipsisContainer.style.top = '-999999px';
     ellipsisContainer.style.zIndex = '-1000';