'Inconsistency in React Native <Text> wrapping behaviour with single long word when exceeding parent's width
I noticed there is incosistency in the wrapping behaviour of the React Native when a single long word exceeds the parent's width. To illustrate this, below is my code:
<View style={{ backgroundColor: 'white', flexDirection: 'column', width: '95%', alignSelf: 'center', marginTop: 120 }}>
<Text style={{ padding: 10, color: 'black', fontSize: 17, fontWeight: '400', borderWidth: 1 }}>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz
</Text>
<Text style={{ padding: 10, color: 'black', fontSize: 17, fontWeight: '400', borderWidth: 1 }}>
abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz abc
</Text>
</View>
The single long words in the first and second row are the same. In the second row, however, I added a space, followed by a shorter string "abc". The behaviour of the text wrapping now changes as shown below:
inconsistent text wrapping (unwanted result)
Is there a way to achieve the same behaviour in text wrapping even if there is a space after the long word, like below?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
