Make text line don't break on flexbox child element ( React Native ) - css

Question

SOLVED (solution at the end)
I have the following layout, I want the text SOME LOOOOOOOOOOOOOONG TEXT to don´t break the line and show an ellipse.
E.x.: Pangaré Figueiredo SOME LOOOOOO...
const LastHighline = (props: Props) => {
return (
<TouchableOpacity className="my-3 flex-row items-center gap-x-3">
<View className="flex-initial">
<HistorySvg />
</View>
<Text className="flex-1 overflow-hidden whitespace-nowrap overflow-ellipsis">{props.name} SOME LOOOOOOOOOOOOOONG TEXT</Text>
<View className="flex-shrink-0 flex-row items-center">
<HeightSvg />
<Text>{props.height}m</Text>
</View>
<View className="flex-shrink-0 flex-row items-center gap-x-2">
<WidthSvg />
<Text>{props.length}m</Text>
</View>
</TouchableOpacity>
);
};
Solution
Just put flex-1 in order to make the element shrink and grow when necessary, and the truncate was substituted with a property of <Text> tag named numberOfLines, set to 1 and got the expected result
check the resource here How to have Ellipsis effect on Text
<Text className="flex-1" numberOfLines={1}>{props.name} SOME LOOOOOOOOOOOOOONG TEXT</Text>`

Answer 1

EDIT
Here is a similar layout to what you're doing. Your issue is that you need to have a bounding box to container the text, and cause it to overflow.
Here is an example
section {
display: flex;
flex-direction: colmun;
gap: 20px;
width: 200px;
background: blue;
color: white;
font-weight: bold;
}
section .box {
background: red;
height: 25px;
width: 25px;
display: block;
}
p {
/* You need to limit the size of the text box */
width: 50px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* If you want to have the second line show, wrap it in a span like this. */
.second p {
display: flex;
flex-direction: column;
}
.second span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<section class="first">
<div class="box"></div>
<p>Text LOOOONNNNNGGGGGGG TEXTTTTT</p>
<div class="box"></div>
<div class="box"></div>
</section>
<section class="second">
<div class="box"></div>
<p>Text <span>LOOOONNNNNGGGGGGG TEXTTTTT</span></p>
<div class="box"></div>
<div class="box"></div>
</section>
Here is a very minimal working version of text-overflow: ellipsis;
See MDN's docs for more information.
section {
background: red;
width: 250px;
}
.text-overflow h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<section>
<h1>Hello World! LOOOOOOONNNNNNGGGGG TEXT</h1>
</section>
<section class="text-overflow">
<h1>Hello World! LOOOOOOONNNNNNGGGGG TEXT</h1>
</section>