Menu
How can I reveal the 1st line of text only? If I have something like this:
<View>
<Text>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
</Text>
</View>
I only want "Contrary to popular belief, Lorem Ipsum" to show up.
631
Just use style={{flex: 1}} in card or text styling to limit within the card. Use numberOfLines={1} to restrict in one line.
As long as the container of the Text element has a Flex value (I use, 1), the text will be truncated within the container. ellipsizeMode='tail' is not needed as 'tail' is default value for ellipsizeMode. Unless you want to show ellipse in beginning of the text, you can use just numberOfLines prop and it should work.
To determine number of lines of Text component with React Native, we can get it from the onTextLayout callback's parameter. to set numberOfLines to NUM_OF_LINES to restrict the number of lines to display. Then we set the onTextLayout prop to the onTextLayout function and get the number of lines displayed with e.
You can use \n where you want to break the line.
You can use the prop numberOfLines to restrict the text from overflowing:
<Text numberOfLines={1}>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
</Text>
This will wrap your text when the limit of parent view is reached, like:
Contrary to popular belief, Lorem Ipsum is not...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
