使内容适应容器的宽度

Question

我有一个react-native-paper Card组件:

<Card className='flex pt-2 pl-2' >
<View className='flex flex-row w-full'>
<Card.Cover className='h-20 w-20' source={{ uri: imgUrl }} />
<View className='w-full break-normal'>
<Text className='text-textColor font-interSBold'>{title}</Text>
<Text>{author}</Text>
</View>
</View>
</Card>

生成卡片的屏幕截图

我用它来渲染动态数据，但是如果标题太长，那么它就会溢出组件。我该如何处理?

我试过使用flexWrap属性和flexShrink，但都不起作用。

Answer 1

从<View className='w-full break-normal'>中移除w-full

<Card className='flex pt-2 pl-2' >
<View className='flex flex-row w-full'>
<Card.Cover className='h-20 w-20' source={{ uri: imgUrl }} />
<View className=' break-normal'> <!-- 👈 remove w-full here -->
<Text className='text-textColor font-interSBold'>{title}</Text>
<Text>{author}</Text>
</View>
</View>
</Card>