[fix] Text numberOfLines=1 on Safari"

This reverts commit 562db69. Close #2193 Fix #2186 Fix #2111
necolas · Feb 17, 2022 · 79707ce · 79707ce
1 parent 944b45c
commit 79707ce
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = `
 
 exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
 <div
-  class="css-text-901oao css-textMultiLine-cens5h"
+  class="css-text-901oao css-textOneLine-nfaoni"
   dir="auto"
 />
 `;

diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
@@ -73,11 +73,12 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     const classList = [
       classes.text,
       hasTextAncestor === true && classes.textHasAncestor,
-      numberOfLines != null && classes.textMultiLine
+      numberOfLines === 1 && classes.textOneLine,
+      numberOfLines != null && numberOfLines > 1 && classes.textMultiLine
     ];
     const style = [
       props.style,
-      numberOfLines != null && { WebkitLineClamp: numberOfLines },
+      numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
       selectable === true && styles.selectable,
       selectable === false && styles.notSelectable,
       onPress && styles.pressable
@@ -179,6 +180,13 @@ const classes = css.create({
     font: 'inherit',
     whiteSpace: 'inherit'
   },
+  textOneLine: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    wordWrap: 'normal'
+  },
   // See #13
   textMultiLine: {
     display: '-webkit-box',