1
0
Эх сурвалжийг харах

fix(typography): paragraph ellipsis error (#596)

when set whiteSpace pre
tank0317 3 жил өмнө
parent
commit
4313eb91b8

+ 8 - 0
packages/semi-ui/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言,Semi Design
       以用户中心、内容优先、设计人性化为设计理念,具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子: Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言,Semi Design 以用户中心、内容优先、设计人性化为设计理念,具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子: Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言,Semi Design 以用户中心、内容优先、设计人性化为设计理念,具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

+ 0 - 1
packages/semi-ui/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container