尽管有足够的空间，但文本没有被包裹在同一行中答案

【问题标题】：Text is not being wrapped in same line though there is enough space尽管有足够的空间，但文本没有被包裹在同一行中
【发布时间】：2021-03-02 08:44:50
【问题描述】：

这是我的代码

   <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>
        <Text>This is the title which can upto two lines beyond the card size</Text> : null}
        <Icons name={'dot'} />
        <Text>Kishore3</Text>
   </View>

输出如下所示

如果我们看一下图像，我们会注意到绘制黄线的地方有足够的空间。但是dot 和文本kishore3 转到下一行。

如何尽可能利用可用空间？

注意：即使只渲染两三个字符Text也可以。

【问题讨论】：

这可能是因为<text> 使用了中断。尝试将图标和 kishore3 放在第一个 <text> 中。

标签： css react-native flexbox

【解决方案1】：

我不确定，但试试这个

  <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>
        <Text>This is the title which can upto two lines beyond the card size <Icons name={'dot'} /> <Text>Kishore3</Text></Text> : null}
   </View>

【讨论】：

【解决方案2】：

你可以将 flex 分成比例 0.7:0.1:0.2

   <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={{ flex: 0.7}}>This is the title which can upto two lines beyond the card size</Text>
        <Icons style={{ flex: 0.1}} name={'dot'} />
        <Text style={{ flex: 0.2}}>Kishore3</Text>
   </View>

【讨论】：