如何对文本进行省略号效果

Question

我的应用程序中有一个很长的文本,我需要截断它并在末尾添加三个点.

我怎么能在React Native Text元素中做到这一点？

谢谢

Answer 1

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

Answer 2

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

使用numberOfLines

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

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

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

Answer 4

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

箱内结果：

<-- width = 100-->
 -----------------
| Lorem ipsum     |
| dolar sit a...  |
 -----------------

Answer 5

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