How to have Ellipsis effect on Text
React NativeEllipsisReact Native Problem Overview
I'm having a long text in my app and I need to truncate it and add three dots to the end.
How can I do that in React Native Text element?
Thanks
React Native Solutions
Solution 1 - React Native
numberOfLines
parameter on a Text
component:
Use the <Text numberOfLines={1}>long long long long text<Text>
Will produce:
long long long…
(Assuming you have short width container.)
ellipsizeMode
parameter to move the ellipsis to the head
or middle
. tail
is the default value.
Use the <Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>
Will produce:
…long long text
NOTE: The Text
component should also include style={{ flex: 1 }}
when the ellipsis needs to be applied relative to the size of its container. Useful for row layouts, etc.
Solution 2 - React Native
use numberOfLines
<Text numberOfLines={1}>long long long long text<Text>
or if you know/or can compute the max character count per row, JS substring may be used.
<Text>{ ((mytextvar).length > maxlimit) ?
(((mytextvar).substring(0,maxlimit-3)) + '...') :
mytextvar }
</Text>
Solution 3 - React Native
You can use ellipsizeMode and numberOfLines. e.g
<Text ellipsizeMode='tail' numberOfLines={2}>
This very long text should be truncated with dots in the beginning.
</Text>
Solution 4 - React Native
<View
style={{
flexDirection: 'row',
padding: 10,
}}
>
<Text numberOfLines={5} style={{flex:1}}>
This is a very long text that will overflow on a small device This is a very
long text that will overflow on a small deviceThis is a very long text that
will overflow on a small deviceThis is a very long text that will overflow
on a small device
</Text>
</View>
Solution 5 - React Native
<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus
</Text>
Result inside box:
<-- width = 100-->
-----------------
| Lorem ipsum |
| dolar sit a... |
-----------------
Solution 6 - React Native
To Achieve ellipses for the text use the Text property numberofLines={1} which will automatically truncate the text with an ellipsis you can specify the ellipsizeMode as "head", "middle", "tail" or "clip" By default it is tail
Solution 7 - React Native
If you want read more behavior, then you can use the react-native-read-more-text
library:
npm i react-native-read-more-text --save
<ReadMore
numberOfLines={1}
renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
<Text>yourText</Text>
</ReadMore>
Docs: https://github.com/expo/react-native-read-more-text
To hide "read more" when the content is less than numberOfLines, you can use ternary operator:
{
'yourText'.length > 50
?
<ReadMore
numberOfLines={1}
renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
<Text>yourText</Text>
</ReadMore>
:
<Text>yourText</Text>
}
Solution 8 - React Native
const styles = theme => ({
contentClass:{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp:1,
WebkitBoxOrient:'vertical'
}
})
render () {
return(
<div className={classes.contentClass}>
{'content'}
</div>
)
}