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 index 7c1a743be..da9988b41 100644 --- 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`] = `
`; diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index a2a74ce47..a9f08c15d 100644 --- 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 = 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',