Reactnative: cannot get ellipse mode to work

Question

I am trying to truncate text in my react application. I decided to use the "ellipsizeMode" attribute, but I cannot get it to work.

I wrote a demo of the problem:

'use strict'; import React, { Component } from 'react'; import { StyleSheet, Text, View, } from 'react-native'; export class EllipsizeModeTest extends Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>{'first part | '}</Text> <Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}> {'a text too long to be displayed on the screen'} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flexDirection: 'row', }, text: { fontSize: 20, } }); 

Now the text is not truncated, any idea why?

Answer 1

I had the same problem, enough for the element size to be bound to the value. Therefore, if you define a width or add a flex value, it will work.

 <View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View> 

Answer 2

Try assigning the line ellipsizeMode (remove curly braces):

 <Text style={styles.text} numberOfLines={1} ellipsizeMode='tail'> 

Answer 3

Try setting the width style property for the component

 'use strict'; import React, { Component } from 'react'; import { StyleSheet, Text, View, } from 'react-native'; export class EllipsizeModeTest extends Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>{'first part | '}</Text> <Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}> {'a text too long to be displayed on the screen'} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flexDirection: 'row', }, text: { fontSize: 20, width: 100 } });