fix: Typography truncation error when setting white-space to nowrap (#1578)

packages/semi-ui/typography/_story/typography.stories.jsx

@@ -244,12 +244,12 @@ export const EllipsisMultiple = () => (
     >
       如果支持折叠但其实没有达到溢出的高度，仍旧会显示文本
     </Paragraph>
-    <br />
+     <br />
     <Paragraph ellipsis={{ rows: 9, expandable: true }} style={{ width: 300 }}>
       如果支持折叠但其实没有达到溢出的高度，仍旧会显示文本
     </Paragraph>
     <br />
-    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 280 }}>
+   <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 280 }}>
       多行截断并且支持展开：Semi Design 是由互娱社区前端团队与 UED
       团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
       Web 应用。 区别于其他的设计系统而言，Semi Design
@@ -780,3 +780,17 @@ export const TextInline = () => {
     </div>
   )
 }
+
+export const whiteSpaceNoWrap = () => (
+  <div style={{ whiteSpace: 'nowrap' }}>
+    <Typography.Text
+      copyable
+      style={{ width: 100 }}
+      ellipsis={{
+        showTooltip: true,
+      }}
+    >
+      需要截断这段文字，[此处不可见]
+    </Typography.Text>
+  </div>
+)

packages/semi-ui/typography/util.tsx

@@ -61,6 +61,7 @@ const getRenderText = (
     );
 
     // Set shadow
+    const maxWidth = parseInt(originStyle.width);
     ellipsisContainer.setAttribute('style', originCSS);
     ellipsisContainer.style.position = 'fixed';
     ellipsisContainer.style.left = '0';
@@ -80,7 +81,9 @@ const getRenderText = (
 
     // Check if ellipsis in measure div is height enough for content
     function inRange() {
-        // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight);
+        if (originStyle.whiteSpace === 'nowrap') {
+            return ellipsisContainer.scrollWidth <= maxWidth;
+        }
         return ellipsisContainer.scrollHeight < maxHeight;
     }
 
@@ -99,7 +102,7 @@ const getRenderText = (
     Object.values(omit(fixedContent, 'expand')).map(
         node => node && ellipsisContainer.appendChild(node.cloneNode(true))
     );
-   
+
     function appendExpandNode() {
         ellipsisContainer.innerHTML = '';
         ellipsisContainer.appendChild(ellipsisContentHolder);
@@ -146,7 +149,7 @@ const getRenderText = (
         }
         return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
     }
-    
+
     let resText = content;
     // First judge whether the total length of fullText, plus suffix (possible)
     // and copied icon (possible) meets expectations？ 
@@ -155,7 +158,7 @@ const getRenderText = (
     // 如果不符合预期，则再加上展开按钮，找最大符合尺寸的内容
     if (!inRange()) {
         appendExpandNode();
-        resText = measureText(textNode, content, 0, ellipsisPos === 'middle' ? Math.floor((content.length) / 2): content.length);
+        resText = measureText(textNode, content, 0, ellipsisPos === 'middle' ? Math.floor((content.length) / 2) : content.length);
     }
     ellipsisContainer.innerHTML = '';
     return resText;