文本换行后hover触发范围异常，如何限制为实际文本宽度？

我想要实现一个文本可换行，但换行后的文本行不会超出其实际宽度的容器，代码如下：

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

目前遇到的问题是：文本的hover触发范围是上一行的整行宽度，哪怕鼠标没碰到实际文本，只要在该行空白区域也会触发hover效果。试过添加whitespace-nowrap类，但完全没用，请问该怎么修改才能让hover只在实际文本区域触发？

核心问题是外层的Pressable默认是块级（或flex容器）元素，会占据父容器的整行宽度，导致hover范围超出文本实际区域。只需调整Pressable的显示模式即可解决：

• 把Pressable上的flex self-start替换成inline-block，让它的宽度完全贴合内部文本的实际换行宽度，而非占满父容器
• 保留max-w-[100%]确保文本不会超出父列的宽度限制

修改后的代码：

<View className="w-[500px]">
  <View className="grid grid-cols-[95%,5%] border-2">
    <View className="w-full">
      <Pressable onPressOut={() => { }} className="inline-block 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>

修改后，Pressable的边界会完全包裹住换行后的每一行文本，hover事件只会在有文本的区域触发，空白处不会再误触发hover效果。

内容的提问来源于stack exchange，提问作者user29114910