diff --git a/packages/semi-ui/typography/_story/typography.stories.jsx b/packages/semi-ui/typography/_story/typography.stories.jsx index 48405e56ba..6b03548971 100644 --- 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 以用户中心、内容优先、设计人性化为设计理念,具有四大优势。 +
+
+ + 我是一个超长超长超长超长超长超长超长超长超长的链接我是一个超长超长超长超长超长超长超长超长超长的链接 + +
); diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx index 6df50c5003..be45ab3be3 100644 --- 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';