CSS 响应本机文本离开我的屏幕，拒绝换行。该怎么办？

React native text going off my screen, refusing to wrap. What to do?

提问by SudoPlz

The following code can be found in this live example

可以在这个实时示例中找到以下代码

I've got the following react native element:

我有以下反应本机元素：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            </Text>
          </View>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

with the following styles:

具有以下样式：

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

This results in the following screen:

这将导致以下屏幕：

How can I stop the text from going off the screen and keep it confined in the middle of the screen with a width of i.e. 80% of the parent.

如何阻止文本离开屏幕并将其限制在屏幕中间，宽度为父级的 80%。

I don't think I should use widthbecause I will be running this on MANY different mobile screens and I want it to be dynamic, so I think I should rely totally on flexbox.

我不认为我应该使用它，width因为我将在许多不同的移动屏幕上运行它并且我希望它是动态的，所以我认为我应该完全依赖flexbox.

(That was the initial reason why I had flex: 0.8within the descriptionContainerHor.

（这是我flex: 0.8在descriptionContainerHor.

What I want to achieve is something like this:

我想要实现的是这样的：

Thank you!

谢谢！

采纳答案by SudoPlz

The solution to that issue is flexShrink: 1.

该问题的解决方案是flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

Depending on your set up, you may also also need to add flexShrink: 1to the <View>'s parent as well, to get this to work, so play with that and you'll make it.

根据您的设置，您可能还需要添加flexShrink: 1到<View>的父级，以使其工作，所以玩它，你会成功的。

The solution was discovered by Adam Pietrasiakin this thread.

解决方案是由Adam Pietrasiak在此线程中发现的。

回答by Ashok R

I found solution from below link.

我从下面的链接中找到了解决方案。

[Text] Text doesn't wrap #1438

[Text] 文本不换行 #1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

Below is the Github profile user link if you want to thank him.

如果你想感谢他，下面是 Github 个人资料用户链接。

Ally Rippley

艾莉·里普利

---

---

Edit: Tue Apr 09 2019

编辑：2019 年 4 月 9 日星期二

As @sudoPlz mentioned in comments it works with flexShrink: 1updating this answer.

正如@sudoPlz 在评论中提到的，它适用于flexShrink: 1更新此答案。

回答by Dev01

This is a known bug. flexWrap: 'wrap'didn't work for me but this solution seems to work for most people

这是一个已知的错误。 flexWrap: 'wrap'对我不起作用，但这个解决方案似乎对大多数人有用

Code

代码

<View style={styles.container}>
    <Text>Some text</Text>
</View>

Styles

样式

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

回答by jsina

you just need to have a wrapper for your <Text>with flex like below;

你只需要为你<Text>的 flex准备一个包装器，如下所示；

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

回答by Eysi

It works if you remove flexDirection: rowfrom descriptionContainerVerand descriptionContainerVer2respectively.

如果您分别flexDirection: row从descriptionContainerVer和 中删除它，它会起作用descriptionContainerVer2。

UPDATE (see comments)

更新（见评论）

I made a few changes to achieve what I think you're after. First of all I removed the descriptionContainerHorcomponent. Then I set the flexDirectionof the vertical views to rowand added alignItems: 'center'and justifyContent: 'center'. Since the vertical views are now in fact stacked along the horizontal axis I removed the Verpart from the name.

我进行了一些更改以实现我认为您所追求的目标。首先，我删除了descriptionContainerHor组件。然后我将flexDirection垂直视图的 设置为row并添加了alignItems: 'center'和justifyContent: 'center'。由于垂直视图现在实际上是沿水平轴堆叠的，因此我Ver从名称中删除了该部分。

So now you have a wrapper view that should vertically and horizontally align it's content and stack it along the x-axis. I then simply put two invisible Viewcomponents on the left and right side of the Textcomponent to do the padding.

所以现在你有一个包装视图，它应该垂直和水平对齐它的内容并沿着 x 轴堆叠它。然后我简单地在View组件的左侧和右侧放置两个不可见的Text组件来进行填充。

Like this:

像这样：

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

And this:

和这个：

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

Then you get what I believe you were after.

然后你就会得到我相信你所追求的东西。

FURTHER IMPROVEMENTS

进一步改进

Now if you would like to stack multiple text areas within the blue and orange views you can do something like this:

现在，如果您想在蓝色和橙色视图中堆叠多个文本区域，您可以执行以下操作：

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

Where textWrapis styled like this:

哪里textWrap的样式是这样的：

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

Hope this helps!

希望这可以帮助！

回答by Joel

Another solution that I found to this issue is by wrapping the Text inside a View. Also set the style of the View to flex: 1.

我发现此问题的另一个解决方案是将文本包装在视图中。还将视图的样式设置为 flex：1。

回答by letanthang

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{ flex: aNumber } is all you need!

{ flex: aNumber } 就是你所需要的！

Just set 'flex' to a number that suit for you. And then the text will wrap.

只需将“flex”设置为适合您的数字。然后文本将换行。

回答by mcc

I wanted to add that I was having the same issue and flexWrap, flex:1 (in the text components), nothing flex was working for me.

我想补充一点，我遇到了同样的问题，flexWrap, flex:1（在文本组件中），没有任何 flex 对我有用。

Eventually, I set the width of my text components' wrapper to the width of the device and the text started wrapping. const win = Dimensions.get('window');

最终，我将文本组件的包装器的宽度设置为设备的宽度，然后文本开始包装。 const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>

回答by jasonleonhard

Consider using this CSS property:

考虑使用这个 CSS 属性：

hyphens: auto;

Also, this has worked for me in most cases, even with flex columns:

此外，这在大多数情况下对我有用，即使使用 flex 列：

wordWrap: 'break-word'

This way text will still wrap even with a hard coded width on that same element/component.

这样，即使在同一元素/组件上使用硬编码宽度，文本仍将换行。

width: 100

In your case:

在你的情况下：

width: '80%'

In my case, this was critical to keeping 3 columns and still reading text.

就我而言，这对于保留 3 列并仍然阅读文本至关重要。

Hope this helps!

希望这可以帮助！

回答by Nguy?n Phúc

my solution below:

我的解决方案如下：

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

style:

风格：

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

result: [

结果： [