138

我的应用程序中有很长的文字，我需要将其截断并在末尾添加三个点。

我该如何在React Native Text元素中做到这一点？

谢谢

react-native ellipsis

— 兰·耶菲特
source

1

您已得到完美的答案。也许您应该接受？

— Moss Palmer 2015年

33

使用numberOfLines

https://rnplay.org/plays/ImmKkA/edit

或者，如果您知道/或可以计算每行的最大字符数，则可以使用JS子字符串。

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>

— 无聊的游戏
source

84

那不是解决方案。文本是可变宽度。

— Marc 2015年

2

只要Text元素的容器具有Flex值（我使用1），文本就会在容器内被截断。因此，@ Rahul Chaudhari的答案就是做到这一点的方法。

— 寄养时间

numberOfLines = {1}

— Mayaa

1

提供的链接已断开，解决方案应该是使用react-native内置的对此功能的支持，其他答案中对此进行了说明。

— 泰勒（Tyler）

403

`numberOfLines`在`Text`组件上使用参数：

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

将产生：

long long long…

（假设您有短宽度的容器。）

使用`ellipsizeMode`参数将省略号移动到`head`或`middle`。`tail`是默认值。

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

将产生：

…long long text

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

— 埃夫根·菲拉托夫（Evgen Filatov）
source

19

也许显而易见，也许不是，也需要在Text上指定宽度。

— Sten Muchow '16

有趣的问题是：如何计算行数？因为我想没人会事先知道（因为它没有理由是静态的）。

— cglacet

1

好的答案，但是如果想要像css椭圆一样的行为，则需要使用ellipsizeMode ='tail'。

— 安德烈·帕塞科

@RanYefet您应该考虑将此答案标记为正确答案，它将对他人有帮助，谢谢！

— Balthazar

@Goutham我认为最接近的是将ellipsizeMode设置为中。

— Henrik Hansen

65

您可以使用ellipsizeMode和numberOfLines。例如

<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

— 拉胡尔（Rahul Chaudhari）
source

3

只要Text元素的容器具有Flex值（我使用1），文本就会在容器内被截断。

— 寄养时间

3

不需要ellipsizeMode ='tail'，因为'tail'是ellipsizeMode的默认值。除非要在文本开头显示椭圆，否则可以只使用numberOfLines属性，它应该可以工作。

— 卡兰·布特瓦拉

17

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

— 莫因·侯赛尼（Moein Hosseini）
source

0

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

结果： Lorem ipsum...

— 安德烈·FM
source

-9

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})

render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}

— 古拉·普拉萨德
source

1

问题更多是关于React Native，其中textOverflow不是有效的道具

— Brian Nguyen

如何对文本产生省略号效果

numberOfLines在Text组件上使用参数：

使用ellipsizeMode参数将省略号移动到head或middle。tail是默认值。

`numberOfLines`在`Text`组件上使用参数：

使用`ellipsizeMode`参数将省略号移动到`head`或`middle`。`tail`是默认值。