138

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

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

ありがとう

react-native ellipsis

— ラン・イフェット
ソース

1

あなたは完璧な答えを与えられました。多分それを受け入れるべきですか？

— モスパーマー2015年

33

numberOfLinesを使用する

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

または、行ごとの最大文字数を知っている、または計算できる場合は、JS部分文字列を使用できます。

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

— 退屈なゲーム
ソース

84

それは解決策ではありません。テキストは可変幅です。

— Marc

2

Text要素のコンテナーにFlex値（私は1を使用）がある限り、テキストはコンテナー内で切り捨てられます。@Rahul Chaudhariの答えはそれを行う方法です。

— フォスタータイム2017年

— numberOfLines

1

提供されたリンクは壊れており、解決策は、他の回答で説明されている、これに対するサポートネイティブの組み込みサポートを使用することです。

— タイラー

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 }}省略記号は、そのコンテナのサイズに印加相対する必要がある場合。行レイアウトなどに役立ちます。

— エフゲン・フィラトフ
ソース

19

おそらく明白かもしれませんが、テキストにも幅を指定する必要があります。

— Sten Muchow、2016年

興味深い質問は、行数をどのように計算するかです。なぜなら、それを前もって知っている人はいないと思います（静的である理由がないため）。

— cglacet

1

いい答えですが、css ellipsesと同じ動作が必要な場合は、ellipsizeMode = 'tail'を使用する必要があります。

— Andrey Patseiko

@RanYefetあなたはこの答えを正しいものとしてマークすることを検討する必要があります、それは他の人を助けるでしょう、ありがとう！

— Balthazar 2018年

@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

— ラフル・チャウダリ
ソース

3

Text要素のコンテナーにFlex値（私は1を使用）がある限り、テキストはコンテナー内で切り捨てられます。

— フォスタータイム2017年

3

ellipsizeMode = 'tail'はellipsizeModeのデフォルト値であるため必要ありません。テキストの最初に楕円を表示したくない場合を除き、numberOfLinesプロップを使用するだけで機能します。

— Karan Bhutwala

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>

— モイン・ホセイニ
ソース

0

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

結果： Lorem ipsum...

— AndriyFM
ソース

-9

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

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

— ぐるプラサード
ソース

1

問題は、textOverflowが有効な小道具ではないReact Nativeに関するものです

— Brian Nguyen

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

コンポーネントでnumberOfLinesパラメーターを使用しますText。

ellipsizeModeパラメータを使用して、省略記号をheadまたはに移動しますmiddle。tailデフォルト値です。

コンポーネントで`numberOfLines`パラメーターを使用します`Text`。

`ellipsizeMode`パラメータを使用して、省略記号を`head`またはに移動します`middle`。`tail`デフォルト値です。