In HTML/CSS if you want an absolutely positioned element to expand wider than its parent to fit all its text in one line, you can use white-space: no-wrap
.parent {
position: relative;
width: 100px;
}
// text content of this node is wider than 100px
.child {
position: absolute;
white-space: nowrap;
}
The child element will grow just wide enough to fit all the text in one line. There doesn't be a way to do this with Text
components in React Native. You have to specify a fixed number width or the Text component will max out at the parent width. Is there a way?
Figured out that the answer is quite simple.
Text wrap can be specified with the <Text>
component's built-in interface called numberOfLines
, instead of CSS.
<Text numberOfLines={1}>Foobar</Text>
The documentation for this can be found here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With