1

I have text within a view container like this

<View
  style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'grey'
  }}
>
  <Text>Long Text Here</Text>
</View>

My result is something like this

enter image description here

If I add <Text numberOfLines={4}>, this works fine but I want my text to fully fit in view and if it going out of bound then it will show three dots. I am not sure how many lines would be enough as it will differ in different screen sizes.

Daniyal Awan
  • 256
  • 3
  • 13
  • You might find this question helpful: https://stackoverflow.com/questions/45290420/react-native-text-overflows-view-when-in-a-flex. Setting flex is a common workdaround. Solution involving dynamic font size will be costly IMO. – blaz Feb 20 '19 at 09:24

2 Answers2

0

Make your container Scrollable then Data will stay inside the container. Use 

<ScrollView>
 // data
</ScrollView>
AHMAD ASHFAQ
  • 83
  • 1
  • 9
  • It's an option, but I have click enabled on the tiles, it will hinder with scrolling. I just want three dots, without explicitly telling numberOfLines – Daniyal Awan Feb 20 '19 at 09:18
  • **Use Number of lines** ' "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." ' – AHMAD ASHFAQ Feb 20 '19 at 09:21
0

You can use this in <Text>,

numberOfLines={10}  // obviously whatever no. of lines you want
ellipsizeMode="tail"

this will put ... when exceeds lines

Jaydeep Galani
  • 4,842
  • 3
  • 27
  • 47
  • I understand, but lets assume 10 lines are okay in iPad, but on a smaller screen like iPhone, then 5 lines are limit, what happens then is, there will be no ... dots like this. So I just want "tail" or three dots to appear when it goes out of bound, despite number of lines. – Daniyal Awan Feb 20 '19 at 10:03