Menu
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...
778
Use the maxLength prop to set a character limit on an input field in React, e.g. <input maxLength={5} /> . The maxLength attribute defines the maximum number of characters the user can enter into an input field or a textarea element.
React Native allows you to automatically truncate text that will not fit within its <View> container. In most cases this is enough for the device to truncate the text, automatically adding ellipsis to the end of the string (…) after however many lines of text you have specified (In this case, we only want 1 line).
You can combine numberOfLines and width / flex prop to achieve this effect.
<Text numberOfLines={1} style={{ width: 100 }}>
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>
please check this code. you adjust text length according to your space
<Text numberOfLines={1}>
{address.length < 35
? `${address}`
: `${address.substring(0, 32)}...`}
</Text>
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