How to have Ellipsis effect on Text

react-native ellipsis
Ran Yefet picture Ran Yefet · Jun 2, 2015 · Viewed 108.2k times · Source

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

Answer

Evgen Filatov picture Evgen Filatov · Mar 15, 2016

Use the numberOfLines parameter on a Text component:

<Text numberOfLines={1}>long long long long text<Text>

Will produce:

long long long…

(Assuming you have short width container.)

Use the ellipsizeMode parameter to move the ellipsis to the head or middle. tail is the default value.

<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.

Related questions

How can I insert a line break into a <Text> component in React Native?

I want to insert a new line (like \r\n, <br />) in a Text component in React Native. If I have: <text> <br /> Hi~<br /> this is a test message.<br /&…

Read More
React Native android build failed. SDK location not found

I have error when i start running android What went wrong: A problem occurred evaluating project ':app'. > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

Read More
Unable to load script from assets index.android.bundle on windows

I'm trying to run my first React Native project for first time on my device (Android 4.2.2). And I get: unable to load script from assets index.android.bundle Commands that I used: cd (project directory) react-native start react-native run-android

Read More