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

Question

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

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

谢啦

Answer 1

您可以使用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

Answer 2

使用numberOfLines

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

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

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

Answer 3

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

将产生：

long long long…

（假设您的集装箱宽度较短。）

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

将产生：

…long long text

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