Реагировать на собственный текст, исчезающий с моего экрана и отказывающийся переноситься. Что делать? ⇐ CSS

[Anonymous]

В этом живом примере можно найти следующий код.

У меня есть следующий нативный элемент реакции:

Код: Выделить всё

'use strict';

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

var SampleApp = React.createClass({
render: function() {
return      (





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..!






Some other long text which you can still do nothing about.. Off the screen we go then.



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

со следующими стилями:

Код: Выделить всё

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'
}
});

В результате появится следующий экран:




Как я могу предотвратить выход текста за пределы экрана и удерживать его посередине экран с шириной, т.е. 80% от родительского экрана.

Я не думаю, что мне следует использовать ширину, потому что я буду запускать это на МНОГИХ различных мобильных экранах и хочу, чтобы он был динамичным, поэтому я думаю, что мне следует полностью полагаться на flexbox.

(Это была первоначальная причина, по которой у меня было flex: 0.8 в описанииContainerHor.

Я хочу добиться примерно этого:




Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/362 ... what-to-do