Allow vertical overflow for Text with numberOfLines={1}

packages/react-native-web-examples/pages/text/index.js

@@ -314,7 +314,7 @@ function LineExample({ description, children }) {
 
       <View
         style={{
-          borderWidth: 2,
+          borderWidth: 1,
           borderColor: 'black',
           width: 200
         }}
@@ -462,6 +462,22 @@ export default function TextPage() {
             </Text>
           </LineExample>
 
+          <LineExample description="With reduced line height, vertical content is not clipped (1 line)">
+            <Text numberOfLines={1} style={{ lineHeight: 8 }}>
+              {
+                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+              }
+            </Text>
+          </LineExample>
+
+          <LineExample description="With reduced line height, vertical content is not clipped (2 lines, not working)">
+            <Text numberOfLines={2} style={{ lineHeight: 8 }}>
+              {
+                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+              }
+            </Text>
+          </LineExample>
+
           <LineExample description="With space characters within adjacent truncated lines">
             <View style={{ display: 'flex', flexDirection: 'row' }}>
               <Text numberOfLines={1}>

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

@@ -53,13 +53,13 @@ describe('AppRegistry', () => {
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1qsk4np{overflow-x:clip;overflow-y:clip;}
-        .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
         [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
+        .r-overflowInline-1b3bawr{overflow-inline:clip;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv>* {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
@@ -112,13 +112,13 @@ describe('AppRegistry', () => {
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1qsk4np{overflow-x:clip;overflow-y:clip;}
-        .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
         [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
+        .r-overflowInline-1b3bawr{overflow-inline:clip;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv>* {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}
@@ -163,14 +163,14 @@ describe('AppRegistry', () => {
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1qsk4np{overflow-x:clip;overflow-y:clip;}
-        .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
         [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
         .r-left-1d2f490{left:0px;}
         .r-maxWidth-dnmrzs{max-width:100%;}
+        .r-overflowInline-1b3bawr{overflow-inline:clip;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
         .r-pointerEvents-12vffkv>* {pointer-events:auto;}
         .r-pointerEvents-12vffkv{pointer-events:none!important;}

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

@@ -157,7 +157,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-146c3p1 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
+  class="css-text-146c3p1 r-maxWidth-dnmrzs r-overflowInline-1b3bawr r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
   dir="auto"
 />
 `;

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

@@ -214,7 +214,7 @@ const styles = StyleSheet.create({
   },
   textOneLine: {
     maxWidth: '100%',
-    overflow: 'hidden',
+    overflowInline: 'clip',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     wordWrap: 'normal'