I am trying to make a box where text can wrap but the wrapped text line should not be larger than its actual size:

<View className="w-[500px]">
  <View className="grid grid-cols-[95%,5%] border-2">
    <View className="w-full">
      <Pressable onPressOut={() => { }} className="flex self-start max-w-[100%]">
        <Text className="text-[16px] hover:text-[#000013] select-none text-wrap cursor-pointer underline">
          Test this is a long text test test test
        </Text>
      </Pressable>
    </View>
    <Delete />
  </View>
</View>

As you can guess, the text hover is triggered at the width of the upper line.

For reference, normally the text does not trigger a hover when it is not actually being hovered:

What would I have to change, so hovering the wrapped text line is only triggered when it is really being hovered.

I tried adding whitespace-nowrap:

<Text className="whitespace-nowrap ...">

However, that does not change anything.

I am trying to make a box where text can wrap but the wrapped text line should not be larger than its actual size:

<View className="w-[500px]">
  <View className="grid grid-cols-[95%,5%] border-2">
    <View className="w-full">
      <Pressable onPressOut={() => { }} className="flex self-start max-w-[100%]">
        <Text className="text-[16px] hover:text-[#000013] select-none text-wrap cursor-pointer underline">
          Test this is a long text test test test
        </Text>
      </Pressable>
    </View>
    <Delete />
  </View>
</View>

As you can guess, the text hover is triggered at the width of the upper line.

For reference, normally the text does not trigger a hover when it is not actually being hovered:

What would I have to change, so hovering the wrapped text line is only triggered when it is really being hovered.

I tried adding whitespace-nowrap:

<Text className="whitespace-nowrap ...">

However, that does not change anything.

• react-native
• tailwind-css

1 Answer 1

Well, I created a very clean reproduction with a single Text component. This can trigger the "block" style appearance you described, where the pointer cursor style applies to the entire block.

<Text style={{
  cursor: 'pointer',
}}>Hello World</Text>

• Playground with a <Text> component

However, if I wrap this Text component in another Text component, the issue disappears. This is an interesting behavior for me, but it still triggers the requested functionality, where the cursor pointer is only active over the text.

<Text>
  <Text style={{
    cursor: 'pointer',
  }}>Hello World</Text>
</Text>

• Playground with a parent & sub <Text> components

It seems that if my two Text components stay within the View element, it works, but if I place them inside a Pressable, it doesn't work at all.

I'm not a big expert, but the point of the Pressable component is that it fills the entire space, so it makes sense that it would interpret the cursor as a block in that case.

• https://reactnative.dev/docs/pressable