[fix] Text preserves white-space if numberOfLines={1}

Preserve meaningful white-space when `numberOfLines={1}` by using the `pre`
value instead of `nowrap`.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Close necolas#2058

Author: evancharlton

packages/examples/pages/text/index.js

@@ -370,17 +370,30 @@ export default function TextPage() {
         </Text>
 
         <View style={{ maxWidth: 320 }}>
-          <Text numberOfLines={1}>
+          <View style={{ borderColor: '#cecece', borderWidth: 1, marginVertical: 20 }}>
+            <Text style={{ fontWeight: 700 }}>The next two lines should look identical:</Text>
+            <View style={{ display: 'flex', flexDirection: 'row' }}>
+              <Text numberOfLines={1}>Spaces </Text>
+              <Text numberOfLines={1}>between</Text>
+              <Text numberOfLines={1}> words</Text>
+            </View>
+            <View style={{ display: 'flex', flexDirection: 'row' }}>
+              <Text>Spaces </Text>
+              <Text>between</Text>
+              <Text> words</Text>
+            </View>
+          </View>
+          <Text numberOfLines={1} style={{ marginBottom: 20 }}>
             Maximum of one line, no matter how much I write here. If I keep writing, it
             {"'"}
             ll just truncate after one line.
           </Text>
-          <Text numberOfLines={2} style={{ marginTop: 20 }}>
+          <Text numberOfLines={2} style={{ marginBottom: 20 }}>
             Maximum of two lines, no matter how much I write here. If I keep writing, it
             {"'"}
             ll just truncate after two lines.
           </Text>
-          <Text style={{ marginTop: 20 }}>
+          <Text style={{ marginBottom: 20 }}>
             No maximum lines specified, no matter how much I write here. If I keep writing, it
             {"'"}
             ll just keep going and going.

packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap

@@ -157,6 +157,13 @@ 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-textOneLine-vcwn7f"
+  dir="auto"
+/>
+`;
+
 exports[`components/Text prop "selectable" value of false 1`] = `
 <div
   class="css-text-901oao r-userSelect-lrvibr"

packages/react-native-web/src/exports/Text/__tests__/index-test.js

@@ -129,7 +129,11 @@ describe('components/Text', () => {
 
   describe('prop "numberOfLines"', () => {
     test('value is set', () => {
-      const { container } = render(<Text numberOfLines="3" />);
+      const { container } = render(<Text numberOfLines={3} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    test('value is set to one', () => {
+      const { container } = render(<Text numberOfLines={1} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });

packages/react-native-web/src/exports/Text/index.js

@@ -178,7 +178,7 @@ const classes = css.create({
     maxWidth: '100%',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'pre'
   },
   // See #13
   textMultiLine: {