Question

是否有一种方法可以控制Text组件中文本的断字行为？在iOS上使用多行Text组件时，它会自动在有断字的地方断开文本（我还没有检查过android，但我也需要在这里工作）。我希望更改该行为以打破每个字符级别，就像您可以执行以下CSS规则一样：

word-break: break-all;

Answer 1

“文本”组件有一个仅限Android的textbreakstrategy属性，该属性允许对如何拆分文本进行一些控制。该属性值映射到Android的本机android:breakStrategy值。

此属性似乎无法翻译为iOS。

否则，如果您对“文本”值有一定的了解，则可以使用Soft Hyphen

表示文本拆分。

<Text>aaaaaaaaaaaaaaaaaa bbbbbbbbbbb&shy;CCCCC.</Text>

这将显示为：

aaaaaaaaaaaaaaaaaa bbbbbbbbbbb-
CCCCC.

如果都不足够，我想这超出了Text组件的功能，您可能必须还原到另一个组件。也许可以呈现简单的html。

Answer 2

尝试将flexWrap: "wrap"添加到文本组件的样式

示例：

代码

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

样式

export default StyleSheet.create({
  container: {
      flexDirection: 'row',
      alignItems: 'center',
  },
  text: {
    width: 0,
    flexGrow: 1,
    flex: 1,
  }
});

Answer 3

使用split＆map将<text>str</text>转换为<View><text>s</text><text>t</text><text>r</text></View>！

export default class PageCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tail: false,
            longWord: 'longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
            longWordTail: ' longWord longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
            longWordTail2: ' longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
        };
    }

    render() {
        return (
            <ScrollView style={{flex: 1, paddingTop: 60, paddingHorizontal: 10}}>
                
                <View style={Styles.breakWordWrap}>
                    <Text numberOfLines={2} ellipsizeMode="tail" style={Styles.breakWord}>
                        {this.state.longWord}
                    </Text>
                </View>

                <View style={Styles.breakWordWrap}>
                    {
                        this.breakWord(this.state.longWord)
                    }
                </View>

                <View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
                    {
                        this.breakWord(this.state.longWordTail)
                    }
                </View>

                <View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
                    {
                        this.breakWord(this.state.longWordTail, true)
                    }
                </View>

                {/*<View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>*/}
                {/*    {*/}
                {/*        this.breakWord(this.state.longWordTail2, true)*/}
                {/*    }*/}
                {/*</View>*/}

            </ScrollView>
        )
    }

    breakWord = (str = '', tail = false) => {
        let strArr = (tail ? str + ' ' : str).split('');
        return strArr.map((item, index) => tail && strArr.length === index + 1 ?
            <Text key={item + index} style={[Styles.breakWord, Styles.breakWordTail, !this.state.tail && Styles.breakWordTailHide]}>...</Text> :
            (tail && strArr.length === index + 2 ? <Text key={item + index} style={[Styles.breakWord]} onLayout={this.breakWordLast}>{item}</Text>
                : <Text key={item + index} style={[Styles.breakWord]}>{item}</Text>)
        );

    }

    breakWordLast = (e) => {
        console.log(e.nativeEvent.layout)
        if (e.nativeEvent.layout.y > 50) {
            this.setState({
                tail: true
            })
        }
    }

}

const Styles = {
    box: {
        marginTop: 10,
    },
    title: {
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center'
    },
    breakWordWrap: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        // not
        borderWidth: 1,
        marginTop: 30,
    },
    breakWordWrapTail: {
        position: 'relative',
        height: 50,
        overflow: 'hidden'
    },
    breakWord: {
        lineHeight: 25
    },
    breakWordTail: {
        position: 'absolute',
        backgroundColor: '#fff',
        right: 0,
        bottom: 0,
        height: 25
    },
    breakWordTailHide: {
        opacity: 0
    }
}

在React Native <Text>元素上控制单词/文本中断

3 个答案: