'React-Native: Limit the length of Text displayed in a Card Section

I have a large Text field and when i am displaying it in a card section i need to trim it at the end and show only up to a particular length.

For example: If the text is:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak

I need to cut the length to get a text like:

Lorem Ipsum is simply dummy text...

react-nativejavaandroid-studio


Solution 1:[1]

please check this code. you adjust text length according to your space

 <Text numberOfLines={1}>
              {address.length < 35
                ? `${address}`
                : `${address.substring(0, 32)}...`}
            </Text>

Solution 2:[2]

Just use style={{flex: 1}} in card or text styling to limit within the card. Use numberOfLines={1} to restrict in one line.

Solution 3:[3]

<Text numberOfLines={1} ellipsizeMode="tail">
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to mak
</Text>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lalit kumar
Solution 2
Solution 3 Wai Ha Lee

Related Questions