Unbreakable Line in React Native Using Text Component

Question

Is it possible fix this in code? I want that the text 170km/h stay always in the same line.

I tried reproduce the problem in a html page and this problem doesn't exists, just in react. See:

 p { background-color: #0000FF; color: #FFFFFF; padding: 20px } p.first { width: 181px; } p.second { width: 180px; }

 <p class='first'> I want that the text 170km/h stay always in the same line. </p> <p class='second'> I want that the text 170km/h stay always in the same line. </p>

Now my React code! You can see it here: https://snack.expo.io/ryaIT4ExQ

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Hi! I'm a text and I'm inside a Text Component and I want that 170km/h stay always in the same line. How what I need do to make this?
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    backgroundColor: "red",
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ffffff',
  },
});

Answer 1

It seems the nowrap property hasn't been added yet (by the way, Sacha must have ommited the native part here with that span suggestion). So far the only solution I've found was changing the slash symbol to its HTML entity as shown here . I'm aware of the fact that it looks a bit different, but well, it works. Guess we have to use that until the native JSS works as it works.

Answer 2

I would put 170km/h in a span and give it white-space: nowrap

I want that the text <span style="white-space: nowrap">170km/h</span> stay always in the same line.

https://css-tricks.com/forums/topic/prevent-word-breaks/

Answer 3

只需为文本样式 flexWrap 添加道具：'wrap'，