fix: Incorrect suffix position calculation when Typography strong att…

…ribute is true (#2506) * fix: Incorrect suffix position calculation when Typography strong attribute is true * fix: [Typography] Fix the problem of omitting text of strong type --------- Co-authored-by: zhangyumei.0319 <zhangyumei.0319@bytedance.com>
DouyinFE · Sep 27, 2024 · 351eec7 · 351eec7
1 parent ace7796
commit 351eec7
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/packages/semi-ui/typography/_story/typography.stories.jsx b/packages/semi-ui/typography/_story/typography.stories.jsx
@@ -918,4 +918,57 @@ export const SizeAffectIcon = () => {
           <Text size="small"  icon={<IconLink />} underline>带下划线的网页链接</Text>
       </>
   )
+}
+
+export const StrongEllipsis = () =>{
+    return (
+      // 用于测试 strong 类型的 ellipsis 效果是否符合预期
+      // https://github.com/DouyinFE/semi-design/pull/2506
+      <div className="App">
+        <Typography.Title heading={2}>windows</Typography.Title>
+        {/* case 1 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "HELLO WORLD" }}
+          style={{ width: 300 }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <br />
+        {/* case 2 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "HELLO WORLD" }}
+          style={{ width: 300, wordBreak: "break-all" }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <Typography.Title heading={2}>macOS</Typography.Title>
+        {/* case 3 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "1234567891011" }}
+          style={{ width: 300 }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <br />
+        {/* case 4 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "123456" }}
+          style={{ width: 300, wordBreak: "break-all" }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+      </div>
+    );
 }
diff --git a/packages/semi-ui/typography/base.tsx b/packages/semi-ui/typography/base.tsx
@@ -351,7 +351,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
 
     getEllipsisState = async ()=> {
         const { rows, suffix, pos } = this.getEllipsisOpt();
-        const { children } = this.props;
+        const { children, strong } = this.props;
         // wait until element mounted
         if (!this.wrapperRef || !this.wrapperRef.current) {
             await this.onResize();
@@ -406,7 +406,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             extraNode,
             ELLIPSIS_STR,
             suffix,
-            pos
+            pos,
+            strong
         );
         return new Promise<void>(resolve=>{
             this.setState({

diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx
@@ -38,7 +38,8 @@ const getRenderText = (
     },
     ellipsisStr: string,
     suffix: string,
-    ellipsisPos: string
+    ellipsisPos: string,
+    isStrong: boolean,
 ) => {
     if (content.length === 0) {
         return '';
@@ -66,6 +67,7 @@ const getRenderText = (
     ellipsisContainer.style.height = 'auto';
     ellipsisContainer.style.top = '-999999px';
     ellipsisContainer.style.zIndex = '-1000';
+    isStrong && (ellipsisContainer.style.fontWeight = '600');
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';