如何解决React Native:每N个字符后换行并正确换行
红色文本表示需要的东西和我拥有的东西。 当前,如果后面的单词不合适,则文本仅跳至下一行(面板1)。 但是,我希望将文本换行并切掉,以便通过破坏文本而不是空格来填充字符行(面板2)
如何包装文本而不增加太多空间而跳过?
renderCards() {
var tempoArray = [];
for (const n in dbEntries) {
if (dbEntries[n].eScene.length > 0) {
var tempRet = this.stringDivider(dbEntries[n].eScene,12);
tempoArray.push(tempRet);
}
}
return dbEmotionEntries.map((item,index) => {
return (
<View style={[styles.row,{marginTop: 1}]}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
padding: 10,}}>
<Text
numberOfLines={6}
style={[
styles.garamondDark,{
fontSize: 15,marginTop: 10,height: 80,width: 130,opacity: 0.7,textAlign: 'justify',//justify,left
// textAlignLast: 'left',//doesnt work
},]}>
{item.eScene}
{/* {tempoArray[index]} */} //
</Text>
</View>
Other Panels...............
</ScrollView>
更新:
我正在使用一个函数来操纵字符串;每12个字符添加一行。
stringDivider(str,maxLength) {
var buff = '';
var numOfLines = Math.floor(str.length / maxLength); //.round?
for (var i = 0; i < numOfLines + 1; i++) {
buff += str.substr(i * maxLength,maxLength);
if (i !== numOfLines) {
if (buff.slice(-1) === ' ') {
buff += '\n';
} else {
buff += '-\n';
}
}
}
return buff;
}
当我将text-align设置为“ justify”时,文本仍然没有合理地对齐。
如何让每行在视觉上占据相同的空间?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。