How to have Ellipsis effect on Text

Issue

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

Solution

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>

Answered By - boredgames