文本省略号溢出答案

【问题标题】：Text elipsis overflowing文本省略号溢出
【发布时间】：2018-07-22 14:47:24
【问题描述】：

我在获得我认为是在 react-native 中实现的简单布局时遇到了一些麻烦。

基本上我需要连续两个视图，它们的父级具有justifyContent: 'space-between'。

在第一个视图中，有两个文本组件，其中一个在增长时必须有一个省略号。

我的预期：

相反，我得到的是该文本组件的溢出：

    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>

      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text>AVATAR</Text>
        <View style={{ marginHorizontal: 15 }}>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
        </View>
      </View>

      <View>
        <Text>9,999,999,999.99</Text>
      </View>

    </View>

一个沙盒来玩一个例子： https://snack.expo.io/HkeFQbyvf

【问题讨论】：

标签： reactjs css react-native flexbox react-native-ios

【解决方案1】：

如果您将flex: 1 添加到内部<View style={{ marginHorizontal: 15 }}> 它将起作用

更新的代码示例

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>AVATAR</Text>
      <View style={{ flex: 1, marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

根据评论更新

主要原因是因为内部<View style={{ marginHorizontal: 15 }}> 是一个可伸缩row 项，因此可水平伸缩 并需要flex: 1 提供的宽度。

如果使用默认的 column 方向，它将工作 w/o，例如像这样：

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1 }}>
       <View style={{ marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

【讨论】：

谢谢，成功了！小心解释为什么添加 flex: 1 有诀窍吗？
@mfreitas 要使 ellipsis 起作用，元素需要设置宽度，flex: 1 将元素限制为仅占用可用空间，而不再占用更多空间，因此 text-overflow 启动。此外，Flexbox 需要通过所有父/子级别进行此约束才能工作。
@mfreitas 我还为我的回答添加了解释

【解决方案2】：

尝试在第一个内部视图的样式中添加 flexShrink:1

【讨论】：