如何防止换行/断句:响应本机

时间:2019-02-24 06:14:21

标签: css react-native

我必须防止将两个单词的句子(“ 查看更多”,请参见图片)包装为链接,链接中的单词需要在一起。 React native在CSS中不支持空白属性,因此需要一个解决方案!参见下图:

reference image

另请参见代码结构:

<View style={styles.rewardsAction}>
  <Text style={styles.rewardsInfo}>AED 20 of 100 can be redeemed.  
     <Text style={styles.viewmore} numberOfLines={1}>View More</Text>
  </Text>
  <Text style={styles.rewardsApply}>Apply</Text>
</View>

及其对应的CSS:

rewardsAction:{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', borderWidth: 1, borderColor: '#eaeaea', paddingHorizontal: 10, paddingVertical: 10, borderRadius: 10  },
rewardsInfo:{width: '80%'},
rewardsApply:{ color: 'red'},
viewmore: {width: 80, borderWidth: 1, borderColor: '#000', textDecorationLine: 'underline', color: 'skyblue', flexWrap: 'nowrap'},

我也曾在互联网上搜索解决方案,但它们与此无关!任何情况下的快速修复也将有所帮助!

编辑: 我在下面有一些答案,我认为有些困惑,查看更多文本应该在同一行中放在一起,或者应该在下面,“ 应用”文本分开在右边,“ 查看更多”应该与该句子一起使用!

3 个答案:

答案 0 :(得分:0)

<View style={styles.rewardsAction}>
  <View style={{flexDirection:'row',flexWrap:'wrap'}}>
   <View>
      <Text style={styles.rewardsInfo}>AED 20 of 100 can be redeemed.</Text>
   </View>
   <View>   
     <Text style={styles.viewmore} numberOfLines={1}>View More</Text>
   </View>
  </View>
  <Text style={styles.rewardsApply}>Apply</Text>
</View>

您可能会有类似上面的内容。如果有空间,则“查看更多”将在同一行中出现,否则它将移至下一行。

答案 1 :(得分:0)

您使用的是棒状文本,因此JustifyContent无法正常工作。而是尝试像这样绑定View标签。

<View style={{flex: 'row', JustifyContent: 'space-between'}>
     <View>  
         <Text>AED 20 of 100 can be redeemed.</Text> 
     </View>

     <View>
          <Text>View More</Text>
     </View>

     <View>
          <Text style={{color:'red'}}>Apply</Text>
     </View>

</View>

在文本标签中尝试不应用其他样式,例如宽度等,而在视图标签中使用。

答案 2 :(得分:0)

在 JSX 中的静态文本中使用 &nbsp;

使用 text.replace(/\s/g, '\xa0') 将空格替换为变量中的不间断空格。