enhance: ssr ellipsis effect (#48205)

* enhance: ssr ellipsis effect * test: update snapshot * chore: fix lint
ant-design · Apr 2, 2024 · 7e6678a · 7e6678a
1 parent 0a79a79
commit 7e6678a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 45 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4590,8 +4590,7 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
           title=""
         >
           <span
-            aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
-            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
           >
             longtextlongtextlongtextlongtextlongtextlongtextlongtext
           </span>
@@ -4632,8 +4631,7 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
           title=""
         >
           <span
-            aria-label="longtext longtext longtext longtext longtext longtext longtext"
-            class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+            class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
           >
             longtext longtext longtext longtext longtext longtext longtext
           </span>

diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1822,8 +1822,7 @@ Array [
             class="ant-menu-title-content"
           >
             <span
-              aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team"
-              class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+              class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
             >
               Ant Design, a design language for background applications, is refined by Ant UED Team
             </span>

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
@@ -207,14 +207,14 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const needMeasureEllipsis = React.useMemo(
     () =>
       // Disable ellipsis
-      !mergedEnableEllipsis ||
+      mergedEnableEllipsis &&
       // Provide suffix
-      ellipsisConfig.suffix !== undefined ||
-      ellipsisConfig.onEllipsis ||
-      // Can't use css ellipsis since we need to provide the place for button
-      ellipsisConfig.expandable ||
-      enableEdit ||
-      enableCopy,
+      (ellipsisConfig.suffix !== undefined ||
+        ellipsisConfig.onEllipsis ||
+        // Can't use css ellipsis since we need to provide the place for button
+        ellipsisConfig.expandable ||
+        enableEdit ||
+        enableCopy),
     [mergedEnableEllipsis, ellipsisConfig, enableEdit, enableCopy],
   );
 
@@ -225,7 +225,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     }
   }, [needMeasureEllipsis, enableEllipsis]);
 
-  const cssEllipsis = React.useMemo(() => {
+  const [cssEllipsis, setCssEllipsis] = React.useState(mergedEnableEllipsis);
+
+  const canUseCssEllipsis = React.useMemo(() => {
     if (needMeasureEllipsis) {
       return false;
     }
@@ -237,6 +239,12 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     return isLineClampSupport;
   }, [needMeasureEllipsis, isTextOverflowSupport, isLineClampSupport]);
 
+  // We use effect to change from css ellipsis to js ellipsis.
+  // To make SSR still can see the ellipsis.
+  useIsomorphicLayoutEffect(() => {
+    setCssEllipsis(canUseCssEllipsis && mergedEnableEllipsis);
+  }, [canUseCssEllipsis, mergedEnableEllipsis]);
+
   const isMergedEllipsis = mergedEnableEllipsis && (cssEllipsis ? isNativeEllipsis : isJsEllipsis);
 
   const cssTextOverflow = mergedEnableEllipsis && rows === 1 && cssEllipsis;

diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
@@ -663,8 +663,7 @@ Array [
     </div>
   </div>,
   <div
-    aria-label="This is a loooooooooooooooooooooooooooooooong editable text with suffix."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
   >
     This is a loooooooooooooooooooooooooooooooong editable text 
     <!-- -->
@@ -1145,27 +1144,24 @@ Array [
     </span>
   </button>,
   <div
-    aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <div
-    aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
+    style="-webkit-line-clamp:2"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="width:200px"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.
   </span>,
   <span
-    aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="width:200px"
   >
     <code>
@@ -1233,8 +1229,8 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
     </div>
   </div>
   <div
-    aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
+    style="-webkit-line-clamp:2"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
     <div
@@ -1378,7 +1374,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
     <!-- -->
@@ -1397,8 +1393,7 @@ Array [
     case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="max-width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1432,8 +1427,7 @@ Array [
   </span>,
   <br />,
   <span
-    aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="max-width:400px;font-size:12px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1467,8 +1461,7 @@ Array [
   </span>,
   <br />,
   <span
-    aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1502,8 +1495,7 @@ Array [
   </span>,
   <br />,
   <span
-    aria-label="Ant Design is a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     style="width:100px"
   >
     Ant Design is a design language for background applications, is refined by Ant UED Team.
@@ -1538,8 +1530,7 @@ Array [
   <p>
     [Before]
     <span
-      aria-label="not ellipsis"
-      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     >
       not ellipsis
     </span>
@@ -1549,16 +1540,15 @@ Array [
     style="display:none"
   >
     <span
-      aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
-      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
       style="width:100px"
     >
       默认display none 样式的超长文字， 悬停tooltip失效了
     </span>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis"
-    style="width:300px"
+    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
+    style="width:300px;-webkit-line-clamp:3"
   >
     In the process of internal desktop applications development,
     <span
@@ -1573,8 +1563,7 @@ Array [
 
 exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] = `
 <span
-  aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of "
-  class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
   style="max-width:100%"
 >
   In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of 
@@ -1812,8 +1801,7 @@ Array [
     />
   </div>,
   <div
-    aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
-    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
     title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
   >
     To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life