web-dev-qa-db-ja.com

省略記号をテキストに適用する方法

アプリに長いテキストがあり、切り捨てて最後に3つのドットを追加する必要があります。

React Native Text要素でそれを行うにはどうすればよいですか？

ありがとう

react-nativeellipsis
80
Ran Yefet

numberOfLinesを使用します

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

または、行ごとの最大文字数を計算できる/または計算できる場合は、JSサブストリングを使用できます。

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

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
251
Evgen Filatov

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

42
Rahul Chaudhari
<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>
1
Moein