CODEWITHSUNDEEP
cssflexboxtailwind-css
Juan Andrade
Juan Andrade

Reputation: 336

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

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>
  );
};

enter image description here

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>`

Upvotes: 1

Views: 640

Answers (1)

tubstrr
tubstrr

Reputation: 1255

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>

Upvotes: 2

Related Questions