![](/img/trans.png)
[英]How can I insert a line break into a <Text> component in React Native?
[英]Unbreakable Line in React Native Using Text Component
是否可以在代码中解决这个问题? 我希望文本170km/h
始终保持在同一行。
我尝试在 html 页面中重现该问题,但此问题不存在,只是为了反应。 看:
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>
现在我的 React 代码! 你可以在这里看到: 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',
},
});
我会把170km/h
放在一个跨度内并给它white-space: nowrap
I want that the text <span style="white-space: nowrap">170km/h</span> stay always in the same line.
只需为文本样式 flexWrap 添加道具:'wrap',
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.