Sfoglia il codice sorgente

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

zhangyumei.0319 10 mesi fa
parent
commit
347887c213

+ 14 - 0
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>
 );
 

+ 5 - 0
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';