在Text组件上使用numberolines参数:

<Text numberOfLines={1}>long long long long text<Text>

会产生:

long long long…

(假设你的容器宽度很短。)

使用ellipsizeMode参数将省略号移动到头部或中间。“Tail”为默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

会产生:

…long long text

注意:Text组件还应该包含style={{flex: 1}}，当省略号需要相对于其容器的大小应用时。适用于行布局等。

Const styles = theme => ({ contentClass: { 溢出:“隐藏”, textOverflow:“省略”, 显示:“-webkit-box”, WebkitLineClamp: 1、 WebkitBoxOrient:“垂直” ｝ }) Render () { 回报( < div className = {classes.contentClass} > {“内容”} < / div > ） ｝

您可以使用ellipsizeMode和numberolines。 如

<Text ellipsizeMode='tail' numberOfLines={2}>
  This very long text should be truncated with dots in the beginning.
</Text>

https://facebook.github.io/react-native/docs/text.html

在Text组件上使用numberolines参数:

<Text numberOfLines={1}>long long long long text<Text>

会产生:

long long long…

(假设你的容器宽度很短。)

使用ellipsizeMode参数将省略号移动到头部或中间。“Tail”为默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

会产生:

…long long text

注意:Text组件还应该包含style={{flex: 1}}，当省略号需要相对于其容器的大小应用时。适用于行布局等。

<View 
   style={{
        flexDirection: 'row',
        padding: 10,
    }}
>
  <Text numberOfLines={5} style={{flex:1}}>
       This is a very long text that will overflow on a small device This is a very 
       long text that will overflow on a small deviceThis is a very long text that 
       will overflow on a small deviceThis is a very long text that will overflow 
       on a small device
  </Text>
</View>

使用text属性numberolines ={1}来实现文本的省略号，它会自动截断带有省略号的文本，你可以指定ellipsizeMode为"head"， "middle"， "tail"或"clip" 默认为tail

https://reactnative.dev/docs/text#ellipsizemode